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

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

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

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

1 个答案: