Currently, I'm working on developing a CRUD application using Vue.js and Firebase. However, I've encountered an error that I can't seem to resolve:
[Vue warn]: Property or method "names" is not defined on the instance but referenced during render.While I am able to successfully add information to the real-time database, I'm facing difficulties in displaying the data from the tables inside the database in my Vue.js application. Can someone offer assistance with this?
This snippet shows my firebase.js setup:
import firebase from 'firebase';
const firebaseConfig = {
apiKey: "AIzaSyBDWnEjj0OJayCxR4kJl4iDn9LocDGVcw8",
authDomain: "operand-teste-front-end.firebaseapp.com",
databaseURL: "https://operand-teste-front-end.firebaseio.com",
projectId: "operand-teste-front-end",
storageBucket: "operand-teste-front-end.appspot.com",
messagingSenderId: "648371507080",
appId: "1:648371507080:web:6030b3583a933b69e2b43d",
measurementId: "G-RN0RCH48Y4"
}
const firebaseApp = firebase.initializeApp(firebaseConfig)
export const db = firebaseApp.database()
export const namesRef = db.ref('names');
export const jobRefs = db.ref('jobs')
main.js
import Vue from 'vue'
import App from './App.vue'
import './Firebase'
import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div id="app">
<div>
CRUD using VUEJS + Firebase
<hr>
<div class="formulario">
<label>
Name:
</label>
<input type="text" v-model="name"/>
<br>
<label>
Job:
</label>
<input type="text" v-model="job" />
<br>
<button @click="addPerson">
Add
</button>
</div>
</div>
<div>
<ul>
<li v-for="personName in names" :key="personName['.key']">
{{personName}}
</li>
</ul>
</div>
</div>
</template>
<script>
import {jobRefs,namesRef} from './Firebase'
export default {
data () {
return {
name: '',
job: ''
}
},
firebase:{
names:namesRef
},
methods: {
addPerson(){
namesRef.push({name: this.name, edit: false})
jobRefs.push({job: this.job, edit: false})
}
}
}
</script>
<style>
#app {
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.formulario{
width: 170px;
border: 3px aqua solid;
margin: 20px auto;
background-color: rgb(102, 201, 255);
}
button{
border: 2px;
background-color: transparent;
}
</style>
Expected Outcome: Displaying the data saved in Firebase on the view
Current Issue:
[Vue warn]: Property or method "names" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.Your assistance in resolving this problem would be highly appreciated. Thank you!