I've been working on a simple Vue+Firebase application that allows users to send strings to the Firebase database and have the messages displayed using the "v-for" directive. However, I keep encountering an error message stating:
Property or method "messages" is not defined on the instance but referenced during renderdespite my efforts to follow Vue's example on their website and the guidance provided on the Vuefire GitHub page for linking messages to the database correctly. While I can successfully push data to the database, I am unable to retrieve it. I've been struggling with this issue for about a day now and any assistance would be greatly appreciated.
Below is the relevant code:
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 = '';
}
}
});