无法让 Firebase 数据显示在简单的 Vue 应用程序上答案

【问题标题】：Can't get Firebase data to display on simple Vue app无法让 Firebase 数据显示在简单的 Vue 应用程序上
【发布时间】：2018-12-21 04:22:40
【问题描述】：

我正在尝试运行一个简单的 Vue+Firebase 应用程序，它允许您将字符串发送到 firebase 数据库并使用“v-for”指令显示消息。但是，我不断收到错误

Property or method "messages" is not defined on the instance but referenced during render

尽管我很确定我使用了基于 Vue 在他们网站上的示例和 Vuefire github 页面的正确语法来将 messages 链接到数据库。我可以很好地推送到数据库，但由于某种原因，我无法从数据库中读取数据。我已经无法让它工作了大约一天，在这一点上，任何帮助表示赞赏。

这是我的参考代码：

index.html:

<head>
    <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = { ... };
      firebase.initializeApp(config);
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
     <div id="app">
      <input type="text" v-model="message" placeholder="Type a message!">
      <button v-on:click="sendData">Send Data</button>
      <br>
      <h3 v-for="msg in messages">{{msg.value}}</h3>
    </div>

    <script type="text/javascript" src="app.js"></script>
</body>

app.js：

var messageRef = firebase.database().ref('local/responses');

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      message: ''
    }
  },
  firebase: function () {
    return {
      messages: messageRef
    }
  },
  methods: {
    sendData: function () {
      messageRef.push(this.message);
      this.message = '';
    }
  }
});

【问题讨论】：

将messages 属性从firebase: 属性移到data: 返回对象中，您应该会很好
不幸的是，这并不能完全解决问题 - 当我将其移至 data 时，我最终得到了静态数量的 <h3> 标签，但没有一个显示所需的值。

标签： javascript firebase vue.js vuejs2 vuefire

【解决方案1】：

您需要将 messages 属性包含在 firestore 返回函数中作为数据库引用，并将数据返回函数作为空数组包含在数据库中以供绑定。

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      message: '',
      messages: []
    }
  },
  firebase: function () {
    return {
      messages: firebase.database().ref('local/responses')
    }
  },
  methods: {
    sendData: function () {
      messageRef.push(this.message);
      this.message = '';
    }
  }
});

发生这种情况是因为您尝试将 Firestore 引用绑定到 Vue 实例中不存在的一段数据，它需要该空数组才能将其绑定到 data 属性。

【讨论】：