使用 Firebase 数据 Vue.js 动态填充数组

Question

我将 Vue.js 与 Chart.js 一起使用，以便从 Firebase 检索一些数据并将其显示在图表上。 这是我的代码：

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

问题是 names 数组总是空的，标签不显示。这是它的外观：

我需要在 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