[Vue warn]: свойство или метод "names" не определены в экземпляре, но на них ссылаются во время рендеринга

Question

Я настраиваю проект Vue.js и подключаю его к Firebase для базы данных в реальном времени.

Проблема: я могу сохранить данные в базе данных Firebase, но не могу отобразить их в виде.

Сообщение об ошибке:

[Vue warn]: свойство или имена метода не определены в экземпляре но упоминается во время рендера.

Я попытался настроить свойство «names» экземпляра 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 warn]: свойство или имена методов не определены в экземпляре но упоминается во время рендера. Убедитесь, что это свойство реактивный, либо в опции данных, либо для компонентов на основе классов, инициализация свойства.

Answer 1

Попробуйте это

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

По сути, у вас есть неправильный attribute в вашем Vue экземпляре. Вам нужно переместить firebase в data ..

( [CodePen] )

Мне не удалось заставить это работать во фрагменте стека ..

~~~ FIX ~~~

---

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 и фрагменте кода.

---

---

ВЫПУСК:

<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 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",
      firebase: {
       names: namesRef
      },
    }
  },

  methods: {
    submitName() {
      namesRef.push( {name:this.name, edit:false} )
    }

  }
}
</script>

<style>