javascript - 类型错误 : Cannot set property of undefined returned JSON issue using Realtime Firebase in Vue. js

Question

我尝试使用实时 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());