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

Question

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

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

错误信息：

[Vue 警告]：实例上未定义属性或方法“名称” 但在渲染期间被引用。

我尝试通过将 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 的数据在视图上呈现

实际结果：

[Vue 警告]：实例上未定义属性或方法“名称” 但在渲染期间引用。确保该属性是 反应式，无论是在数据选项中，还是对于基于类的组件，通过 初始化属性。

Answer 1

基本上，您的Vue 实例中有一个不正确的attribute。您需要将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>
...

---

---

最佳修复：

如果您想在每次用户添加新名称时自动从 firebase 保存/检索数据，您可以使用 computed 属性...如 CodePen 和代码片段中所述......

---

---

问题：

<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>

---

Answer 2

试试这个。 您需要在数据中返回对象

<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>

Answer 3

为names 使用计算属性。在这种情况下Computed 比data 更合适，主要是因为组件没有own 的数据。例如，如果它最终驻留在 vuex 存储中，它将对外部更改做出反应。

<script>

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

  }
}
</script>

Answer 4

试试这个

<script>

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

  }
}
</script>

Answer 5

让我的工作。

解决方案非常简单。

将names:[] 添加到数据对象，使其看起来像：

...
  data () {
    return {
      name: "levi",
      names:[]
    }
  },
....

差不多了。

说明

需要定义firebase对象数据才能使用它

如果您有更多问题，请检查 vuex documentation 将其复制到您的代码中。