动态填充与火力地堡数据Vue.js

，以便检索来自火力地堡一些数据，并在图表上显示它，我使用Vue.js与chart.js之数组。这是我的代码：动态填充与火力地堡数据Vue.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调试结果：

来源

2017-08-30 Vasil Vasilev

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

来源

2017-08-30 10:33:11 user2520818

我已经发布了一个更多的图片，显示了名称检索但在图上没有显示！ –

如果你再次在'.once'回调中调用'renderChart'方法有帮助吗？ – user2520818

是的我使用这段代码进入方法生命周期钩子并在renderChart之前调用它，但仍然看不到任何标签o我的图表 –

动态填充与火力地堡数据Vue.js

回答

相关问题