TypeError: Невозможно установить свойство неопределенной возвращаемой проблемы JSON с использованием Realtime Firebase в Vue.js

Question

Я пытаюсь заполнить массив 'results' данными JSON из базы данных Realtime Firebase, но получаю

TypeError: Невозможно установить свойство 'results' для неопределенного

Вот код 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

Ваша проблема связана с использованием function() { } вместо функции стрелки в методе .forEach(): вы теряете ссылку на this (то есть она становится не лексической). Это означает, что this в вашем обратном вызове больше не относится к самому компоненту VueJS, а вместо этого к объекту Window.

Поэтому, изменив обратный вызов в вашем методе .forEach(), чтобы использовать функцию стрелкидолжен исправить ошибку, с которой вы столкнулись:

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

Pro-tip: поскольку ваш обратный вызов содержит одну строку, вы можете сделать его еще более читабельным, не используя фигурные скобки:

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

Answer 2

Похоже, this не является вашим экземпляром Vue.

Попробуйте связать this с forEach.

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