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

Question

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

很想知道该怎么做！并填写我的一个值表。从那里开始，天空是我敢肯定的极限。感谢您的帮助。

错误消息：vue.common.js?e881:481 [Vue 警告]：安装的钩子出错："ReferenceError: residentsArray is not defined"

 <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 来看，您似乎需要通过 this.$firebaseRefs 引用 firebase 对象的属性：

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

Answer 2

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

还有一件事：您不需要 mounted。我只想为此制作一个 computed，其中 return this.residentsArray.name。有了这个，你就不会有任何绑定问题。

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

The worlds simplest vue.js/vuefire/firebase app. But can't read value

javascript

firebase

vue.js

vuefire