属性或方法“名称”未在实例上定义，但在渲染期间被引用

Question

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. [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 1

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