Javascript 使用Firebase数据Vue.js动态填充阵列

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

问题是名称数组始终为空，并且标签不显示。下面是它的外观：

我需要在x轴上显示学校名称

下图是Vue.js调试器结果：

db.ref（“学校”）

返回一个“firebase.database.Reference”对象，您必须从中检索数据。您可以将其添加到vue

mounted

lifecycle挂钩中：

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

您还可以使用

.on

方法，每当服务器上的数据发生更改时，该方法将自动触发回调。因此，请确保在组件被销毁时将其移除。

---

有关文档，请参阅：

我又发布了一张图片，显示名称已检索，但未显示在图表上！如果再次调用

回调中的
renderChart
方法，会有帮助吗？是的，我将此代码用于方法生命周期挂钩，并在renderChart之前的内部挂载中调用它，但我仍然看不到图表中的任何标签