Question

我正在尝试运行一个简单的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 = '';
    }
  }
});

Answer 1

您需要在Firestore返回函数中同时包含messages属性作为数据库引用，并在数据返回函数中包括一个空的数组以供数据库绑定。

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

无法获取Firebase数据以在简单的Vue应用上显示

1 个答案: