Question

这就是json响应的样子[[61,57,34],[1,1,3]] 我想将第一个数组用于标签，第二个数组用于数据。

如果我手动将labels and data设置在app内，则可以正常工作。

例如 labels: ["q", "w", "e"] data: [1, 5, 10]

Vue.component('chart', {
  props: ['labels', 'data', 'type'],
  template: `
    <canvas style="width: 512px; height: 256px"></canvas>
  `,
  mounted: function () {
    new Chart(this.$el, {
      type: this.type,
      data: {
          labels: this.labels,
          datasets: [{
              label: '# of Votes',
              data: this.data,
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
        }
      })
  }
});

new Vue({
  el: '#app',
  data: {
    message: "test",
    labels: [],
    data: []
  },
  methods: {
    fetchData: function() {
      this.$http.get('/admin/fetch_data').then(res => {
        this.labels = res.body[0];
        this.data = res.body[1];
      })
    }
  },
  beforeMount() {
    this.fetchData()
  }
});

页面上的

组件

<div id="app">
  {{message}}
  <chart :labels="labels" :data="data" type="bar"></chart>
</div>

数据似乎已加载，但页面上没有图表栏。

Answer 1

问题是您的数据尚未提取，因为您正在执行异步任务来获取数据。到那时，组件的挂钩被称为空道具，因为您作为道具传递的数据尚未加载。

所以这样做：

Vue.component('chart', {
  props: ['labels', 'data', 'type' 'loaded'],
  template: `
    <canvas style="width: 512px; height: 256px"></canvas>
  `,
  watch:{
      loaded(isLoaded){
          if(isLoaded){
              this.drawChart();
          }
      }
  },
  methods:{
      drawChart: function () {
        new Chart(this.$el, {
          type: this.type,
          data: {
              labels: this.labels,
              datasets: [{
                  label: '# of Votes',
                  data: this.data,
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
            }
          }) 
    }
  }
});


new Vue({
  el: '#app',
  data: {
    message: "test",
    labels: [],
    data: [],
    loaded: false
  },
  methods: {
    fetchData: function() {
      this.$http.get('/admin/fetch_data').then(res => {
        this.labels = res.body[0];
        this.data = res.body[1];
        this.loaded = true;
      })
    }
  },
  created() {
    this.fetchData()
  }
});

<强> HTML

<div id="app">
  {{message}}
  <chart :labels="labels" :data="data" :loaded="loaded" type="bar"></chart>
</div>

在根vue实例中将属性loaded设置为false并将其作为prop传递
将loaded请求返回的承诺的成功回调中的true更改为ths.$http.get()
在chart组件中设置watcher，观看此loaded道具
在drawChart道具loaded true`

changes to

获取数据后，vues没有绘制图表的Charts.js

1 个答案: