Remplir dynamiquement tableau avec Firebase Data Vue.js

Question

J'utilise Vue.js avec Chart.js afin de récupérer certaines données de Firebase et de les afficher sur un graphique. Voici mon code:

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}) 
    } 
}) 

Le problème est que les noms tableau sont toujours vides et les étiquettes ne sont pas affichés. Voici à quoi il ressemble:

J'ai besoin d'afficher les noms des écoles sur l'axe x !

Sur l'image ci-dessous est le résultat du débogueur Vue.js:

Answer 1

db.ref('school') retourne un objet « firebase.database.Reference » vous devez récupérer les données qu'il contient. vous pouvez ajouter à votre crochet du cycle de vie vue mounted:

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

vous pouvez aussi utiliser la méthode .on qui déclenche automatiquement votre rappel à chaque fois que les modifications de données sur le serveur. alors assurez-vous de supprimer cela lorsque le composant est détruit. pour la documentation voir: https://firebase.google.com/docs/reference/js/firebase.database.Reference#once