世界上最简单的vue.js / vuefire / firebase应用程序。 但看不懂价值

Question

Vue.js对于sql程序员来说是一种生活方式的改变，但是到了那里。 在这里，我按照规范使用vuefire，甚至手动从我的一条记录（一个字段Firebase DB）中插入正确的密钥进行测试。 却看不到任何返回或显示。

爱知道该怎么做！ 并填写我的一份价值表格。 我确定，从那里开始，天空才是极限。 谢谢你的帮助。

错误消息：vue.common.js？e881：481 [Vue警告]：挂接的钩子中出现错误：“ ReferenceError：未定义residentsArray”

 <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

从阅读README上vuefire Github上，它看起来像你需要参考您的属性firebase通过对象this.$firebaseRefs

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

Answer 2

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

还有一件事：您不需要为此mounted 。 我只是为此做一个computed ，返回this.residentsArray.name 。 这样，您将不会有任何绑定问题。