Firebase Data Vue.jsを使用して配列に動的に値を設定する

Question

Firebaseからデータを取得してグラフに表示するために、Vue.jsをChart.jsとともに使用しています。 これは私のコードです：

import {Line} from 'vue-chartjs' 

let Firebase = require('firebase'); 
// 
let config = { 
    apiKey: '****************************', 
    authDomain: '****************************', 
    databaseURL: '****************************', 
    storageBucket: '****************************' 
}; 

let firebaseApp = Firebase.initializeApp(config); 
let db = firebaseApp.database(); 
let schools = db.ref('schools'); 

export default Line.extend({ 
    firebase: { 
     schoolsArray: schools 
    }, 
    data(){ 
     alert('data'); 
     return { 
      names: [] 
     } 
    }, 
    computed: { 
     schoolNames: function() { 
      for (let item of this.schoolsArray) { 
       this.names.push(item.name); 
      } 
      alert('computed'); 
      return this.names 
     } 
    }, 

    mounted() { 
     alert('mounted'); 
     this.renderChart({ 
      labels: this.names.toString(), 
      datasets: [{ 
       label: 'School Reports', backgroundColor: '#dd4935', 
       data: [10, 20, 50, 12, 34, 43, 45] 
      }] 
     }, {responsive: true, maintainAspectRatio: true}) 
    } 
}) 

問題が名前配列は常に空で、ラベルが表示されないということです。ここでは、それがどのように見えるかです：

私はX軸上の学校名を表示する必要があります！下の絵で

はVue.jsデバッガの結果である：

Answer 1

db.ref('school')は、あなたがそれからデータを取得しなければならない「firebase.database.Reference」オブジェクトを返します。あなたはVUE mountedライフサイクルフックにこれを追加することができます。

db.ref('school').once('value') 
.then((dataSnapshot) => { 
    this.schoolsArray = dataSnapshot.val(); 
}); 

あなたもたびに自動的にサーバー上のデータの変更、コールバックを起動します.onメソッドを使用することができます。コンポーネントが破棄されたときに必ず削除してください。 のドキュメントについては、https://firebase.google.com/docs/reference/js/firebase.database.Reference#once