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模型，因此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>

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

1 个答案: