vue.js - [Vue 警告] : Property or method "names" is not defined on the instance but referenced during render

Question

我正在设置一个 Vue.js 项目并将其连接到 Firebase 以获取实时数据库。

问题:我能够将数据保存到 Firebase 数据库，但是我无法将其呈现到 View 中。

错误信息:

[Vue warn]: Property or method "names" is not defined on the instance but referenced during render.

我试图调整 vue通过将其添加到数据函数而不是使其成为实例中的单独属性，实例“命名”属性，但这是行不通的。

<div id="app">

    <label for="">Name</label>
    <input type="text" name="" id="" v-model="name">
    <button @click="submitName()">Submit</button>


    <div>
        <ul>
            <li v-for="personName of names"
            v-bind:key="personName['.key']">
            {{personName.name}}
            </li>
        </ul>
    </div>

  </div>

<script>

import {namesRef} from './firebase'
export default {
  name: 'app',
  data () {
    return {
      name: "levi",
    }
  },
  firebase: {
    names: namesRef
  },
  methods: {
    submitName() {
      namesRef.push( {name:this.name, edit:false} )
    }

  }
}
</script>

<style>

预期结果:保存到 Firebase 的数据呈现在 View 上

实际结果:

[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

本质上，您有一个不正确的 attribute在您的 Vue实例..你需要移动firebase进入 data ..

( [CodePen] )

我无法在 Stack Snippet 中使用它。

~~~修复~~~

VUE/JS

firebase.initializeApp({
  databaseURL: "https://UR-DATABASE.firebaseio.com",
  projectId: "UR-DATABASE"
});

const database = firebase.database().ref("/users");

const vm = new Vue({
  el: "#app",
  data: {
    firebase: {
      names: []
    },
    name: "SomeName"
  },
  methods: {
    getFirebaseUsers() {
      this.firebase.names = [];
      database.once("value", users => {
        users.forEach(user => {
          this.firebase.names.push({
            name: user.child("name").val(),
            id: user.child("id").val()
          });
        });
      });
    },
    handleNameAdd() {
      let id = this.generateId();
      database.push({
        name: this.name,
        id: id
      });
      this.name = "";
      this.getFirebaseUsers();
    },
    generateId() {
      let dt = new Date().getTime();
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
        let r = ((dt + Math.random() * 16) % 16) | 0;
        dt = Math.floor(dt / 16);
        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
      });
    }
  },
  mounted() {
    this.getFirebaseUsers();
  }
});

HTML

  <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase.js"> . 
  </script>

  <div id="app">

    <label for="">Name</label>
    <input type="text" name="" id="" v-model="name">
    <button @click="handleNameAdd">Submit</button>


    <div>
        <ul>
            <li v-for="(person, index) in firebase.names"
            v-bind:key="person.id">
            {{person.name}} | {{person.id}}
            </li>
        </ul>
    </div>

  </div>

旧答案:
这就是 data 内部的样子:

...
data() {
  firebase: {
    names: [],
  }
}
...

因此，您的 v-for 中的数据将通过 firebase.names 引用喜欢:

...
<li v-for="(personName, index) in firebase.names"
  :key="index">         // <<-- INDEX IS NOT THE BEST WAY TO STORE KEYS BUT ITS BETTER THAN NOTHING 
  //:key="personName.id // <<-- YOU COULD ALSO DO SOMETHING LIKE THAT, IF YOU HAVE A UNIQUE ID PER PERSON
  {{personName.name}}
</li>
...

最佳修复:

您可以使用 computed如果您想在每次用户添加新名称时自动从 firebase 保存/检索数据...如 CodePen 和 Code Snippet 中所述。



问题:

<script>
import {namesRef} from './firebase'
export default {
  name: 'app',
  data () {
    return {
      name: "levi",
    }
  },
  firebase: {        //  <<--- THIS IS INVALID, AND WHY IT'S NOT RENDERING
    names: namesRef  //        CHECK YOUR CONSOLE FOR ERRORS
  },
  methods: {
    submitName() {
      namesRef.push( {name:this.name, edit:false} )
    }

  }
}
</script>