Property or method “names” is not defined on the instance but referenced during render

i’m creating a CRUD using vuejs and Firebase, but I don’t know how to fix this error, [Vue warn]: Property or method "names" is not defined on the instance but referenced during render.

So I can add information to the real time database, however, I can not show the data inside the database tables to my Vuejs application. someone can help me?

this is my firebase.js

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 usando VUEJS + Firebase
      <hr>
      <div class="formulario">
        <label>
          Nome:
        </label>
        <input type="text" v-model="nome"/>
        <br>
        <label>
          Profissão:
        </label>
        <input type="text" v-model="job" />
        <br>
        <button @click="addPessoa">
          Adicionar
        </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 {
      nome: '',
      job: ''
    }
  },
  firebase:{
    names:namesRef
  },
  methods: {
    addPessoa(){
      namesRef.push({nome: this.nome, 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 Result: Data saved to Firebase is rendered on the view

Reality: [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.

It will help me a lot to solve this problem. I hope my mother tongue doesn’t get in the way.

Answer

You’ve installed the Cloud Firestore plugin but you’re trying to use the Realtime Database.

Use this instead in your main.js file

import { rtdbPlugin } from "vuefire"

Vue.use(rtdbPlugin)

See https://vuefire.vuejs.org/vuefire/getting-started.html#plugin

You also need to import the Firebase database component. In your firebase.js script…

import firebase from "firebase/app"
import "firebase/database"

See https://firebase.google.com/docs/web/setup#using-module-bundlers

Advertisement

Answer