Question

TypeError：无法在 Vue.js 中使用 Realtime Firebase 设置未定义的返回 JSON 问题的属性

2019-10-23

216

javascript json firebase vue.js firebase-realtime-database

我尝试使用来自 Realtime Firebase 数据库的 JSON 数据填充“结果”数组，但我得到了

TypeError: Cannot set property 'results' of undefined

这是 VueJs 代码。

    <template>
        <div id="show-results">
            <h1>Data</h1>
                 <input type="text" v-model="search"  placeholder="search results" />
                <div v-for="result in results" class="single-result">
                <h2>{{ result.Speed }}</h2>
                <article>{{ result.DiscManufacturer }}</article>
            </div>

        </div>
    </template>

    <script>

    import db from '@/firebase/init'
    import firebase from 'firebase'

    export default {
        data () {
            return {
                results: [
                ],
               search: ''
            }
        },
        methods: {

        },  created() {  
firebase.database().ref().on('value', (snapshot) => { snapshot.forEach((childSnapshot) => { this.results = JSON.stringify(childSnapshot.val());

console.log(this.results);
 });
}
    </script>

请帮忙。我是 VueJS 的初学者。

Answer 1

您的问题在于在 .forEach() 方法中使用 function() { } 而不是箭头函数：您丢失了对 this 的引用（即它变为非词汇的）。这意味着回调中的 this 不再引用 VueJS 组件本身，而是引用 Window 对象。

因此，将 .forEach() 方法中的回调更改为使用箭头函数应该可以修复您遇到的错误：

snapshot.forEach(childSnapshot => {
    this.results = childSnapshot.val();   
});

专业提示：由于回调包含一行，您可以通过不使用花括号使其更具可读性：

snapshot.forEach(childSnapshot => this.results = childSnapshot.val());

Answer 2

看起来 this 不是您的 Vue 实例。

尝试将 this 绑定到您的 forEach 。

snapshot.forEach(function(childSnapshot){
  this.results = childSnapshot.val();   
}.bind(this));