Question

Vue.js对于sql程序员来说有点生活方式的改变，但到了那里。在这里我根据规格使用vuefire，甚至手动从我的一条记录中插入正确的密钥，一个字段Firebase DB来测试它。然而，看不到任何返回或显示。

喜欢知道如何做到这一点！并填写我的一个价值表格。从那里起，天空是我确定的极限。谢谢你的帮助。

错误消息：vue.common.js？e881：481 [Vue警告]：挂钩错误：＆＃34; ReferenceError：residentArray未定义＆＃34;

 <template>

    <div class="edit">

    <div class="container">
      <p style="margin-bottom:10px;font-weight:800;">EDIT RECORD</p><br>

      <form id="form" v-on:submit.prevent="updateResident">

        <fieldset class="form-group">
          <label for="first_name">Name</label>
          <input type="text" class="form-control" id="first_name" name="first_name" v-model="currentResident.name">
        </fieldset>

        <input type="submit" class="btn btn-primary" value="Add New Resident">
      </form>

    </div>  

  </div>

</template>

    <script>

    import firebase from 'firebase'

    let editConfig = {
    apiKey: "123456789",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp.firebaseio.com",
    projectId: "my",
    storageBucket: "myapp.appspot.com",
    messagingSenderId: "1234567890"
  };

  var firebaseApp = firebase.initializeApp(editConfig, "Edit")
  var db = firebaseApp.database()

  let residentsReference = db.ref('residents')

  export default {
    name: 'Edit',
    mounted() {
      this.currentResident.name = residentsArray.name;
    },
    firebase: {
      residentsArray: residentsReference.child('-KpzkbA6G4XvEHHMb9H0')
    },
    data () {
      return {
        currentResident: {
          name: ''
        }
      }
    },
    methods: {
      updateResident: function () {
        // Update record here
      }
    }
  }
</script>

Answer 1

通过阅读vuefire Github上的README，看起来您需要通过firebase引用this.$firebaseRefs对象的属性：

mounted() {
  this.currentResident.name = this.$firebaseRefs.residentsArray.name;
},

Answer 2

您应该在residentsArray.name挂钩中将this.residentsArray.name更改为mounted。

还有一件事：你不需要mounted。我只为此computed返回this.residentsArray.name。有了这个，你就不会遇到任何绑定问题。

世界上最简单的vue.js / vuefire / firebase应用程序。但无法读取价值

2 个答案: