0

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

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

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

这是我的参考代码：

索引.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>

应用程序.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 = '';
    }
  }
});
4

1 回答 1

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 属性。

于 2018-10-29T22:10:21.890 回答