属性或方法 "names" 未在实例上定义但在渲染期间被引用

Question

我正在使用 vuejs 和 Firebase 创建一个 CRUD，但我不知道如何修复这个错误， [Vue warn]: Property or method "names" is not defined on the instance but referenced during render.

所以我可以将信息添加到实时数据库，但是，我无法将数据库表中的数据显示到我的 Vuejs 应用程序。有人可以帮助我吗？

这是我的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>

预期结果：保存到 Firebase 的数据在视图上呈现

现实： [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.

这对我解决这个问题有很大帮助。希望我的母语不会碍事

Answer 1

您已经安装了 Cloud Firestore 插件，但您正在尝试使用实时数据库。

在您的 main.js 文件中改用它

import { rtdbPlugin } from "vuefire"

Vue.use(rtdbPlugin)

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

您还需要导入 Firebase 数据库组件。在您的 firebase.js 脚本中...

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

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

属性或方法 "names" 未在实例上定义但在渲染期间被引用

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

javascript

firebase

firebase-realtime-database

vuejs2

vuefire

属性 或方法 "names" 未在实例上定义但在渲染期间被引用

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

javascript

firebase

firebase-realtime-database

vuejs2

vuefire

属性或方法 "names" 未在实例上定义但在渲染期间被引用