当变量超出范围时，使用 Firebase 填充 Vuejs 输入字段

Question

我知道 Firebase 异步返回数据，所以我实际上将变量放在了once() 函数中。但我无法访问变量 叫 whatever。在写这个问题时，我还想我可以尝试将 firebase 数据直接设置为 data()。

我的问题是如何在 VueJS data() 函数中传递数据，以便当用户刷新或重新登录数据时，在这两个不同选项中填充输入字段？

 <template lang="html">
        <div class="">
              <label for="">Name</label>
              <input id="nameId" type="text" v-model="name" />
        </div>
    </template>


export default {
  name: 'app',
  data () {
    return {
      name: '',
    }
  },
  methods:{
    var whatever = [];

    var query = dbRef.orderByKey();
    query.once('value')
         .then(function (snapshot) {
             snapshot.forEach(function(childSnapshot) {
                 var childData = childSnapshot.child('name').val();
                 this.whatever.push(childData);

                 // Option 1: use out of scope 
                 this.name = whatever;

                 // Option 2: directly populate data
                 this.name = childData;

             });
         });


}

Answer 1

尝试以下内容，其中包含我评论中的更改。澄清一下，使用计算属性来执行查询是理想的，因为它将在生命周期的某个点执行。

您也可以使用方法，但您必须在某些时候调用它 - 您在页面重新加载时提到，那么其中一个组件生命周期挂钩将是理想的。

以下是计算属性方法。该属性绑定到 v-model，因此 Vue 也可能会强制您也定义一个 setter，但这很简单。

export default {
  name: 'app',
  data() {
    return {
      name: '',
    }
  },
  computed: {
    fullName() {
      var query = dbRef.orderByKey();
      query.once('value')
        .then((snapshot) => {
          snapshot.forEach((childSnapshot) => {
            this.name = childSnapshot.child('name').val();
          });
        });
    }
  }
}


<template lang="html">
  <div class="">
    <label for="">Name</label>
    <input id="nameId" type="text" v-model="fullName" />
  </div>
</template>