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

【问题标题】：The worlds simplest vue.js/vuefire/firebase app. But can't read value世界上最简单的 vue.js/vuefire/firebase 应用程序。但无法读取值
【发布时间】：2018-01-03 13:59:39
【问题描述】：

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

很想知道如何做到这一点！并填写我的单值表。从那里我敢肯定，天空是极限。感谢您的帮助。

错误消息：vue.common.js?e881:481 [Vue 警告]：挂载钩子中的错误：“ReferenceError:residentArray 未定义”

 <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>

【问题讨论】：

如果你的 Firebase 不是很大/不敏感，你有导出它吗？
嗨，如果我今天不解决它。我会在网上发帖。我敢肯定，这一定很简单。类似的问题：stackoverflow.com/questions/44995450/…
如果将console.log(this.$firebaseRefs.residentsArray) 作为mounted 的第一行，它会记录什么？
返回：U {u: Qg, path: E, m: lf, Nc: false, then: undefined...} Nc: false catch: undefined m: lf path: E then: undefined u : Qg 数据库 : (...) key : (...) parent : (...) ref : (...) root : (...) proto : X
imgur.com/a/2RUot 有调试信息和 firebase 信息。减少到一条记录，一个字段。

标签： javascript firebase vue.js vuefire

【解决方案1】：

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

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

【讨论】：

试一试，不行。错误：“ReferenceError：currentResident 未定义”对我来说似乎已定义。但至少第一条错误信息消失了。
您确定您引用的是this.currentResident 而不仅仅是currentResident？
this.currentResident.name = this.$firebaseRefs.residentsArray.name; console.log("this.currentResident.name", this.currentResident.name) > Edit.vue?abe2:130 this.currentResident.name undefined
现在也是这个：挂载钩子中的错误：“TypeError：无法设置未定义的属性'名称'”
我相信 firebase 引用的定义方式，residentsArray: residentsReference.child('-KpzkbA6G4XvEHHMb9H0') 将返回数组。这意味着this.$firebaseRefs.residentsArray.name 将是undefined。我怀疑你可能想使用asOjbect。

【解决方案2】：

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

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

【讨论】：