Javascript Charts.js与vue在获取数据后不绘制图表

这就是json响应的样子

[[61,57,34]，[1,1,3]]

我希望第一个数组用于标签，第二个数组用于数据

如果我在

app

中手动设置

标签和数据，它仍然可以工作

乙二醇
标签：[“q”、“w”、“e”]
数据：[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()
  }
});

Vue.component（'chart'{
道具：[“标签”、“数据”、“类型”]，
模板：`
`,
挂载：函数（）{
新图表（此为$el{
type:this.type，
数据：{
标签：这个标签，
数据集：[{
标签：“#投票数”，
数据：这个数据，
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
})
}
});
新Vue({
el:“#应用程序”，
数据：{
消息：“测试”，
标签：[]，
数据：[]
},
方法：{
fetchData:function（）{
这是.http.get（'/admin/fetch_data'）。然后（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>


{{message}}

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

问题在于，在执行异步任务获取数据时，尚未获取数据。到那时，组件的挂载钩子将使用空道具调用，因为作为道具传递的数据尚未加载

这样做：

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

Vue.component（'chart'{
道具：['labels'，'data'，'type''loaded']，
模板：`
`,
观察：{
已加载（已卸载）{
如果（已加载）{
这是一张图纸（）；
}
}
},
方法：{
绘图图：函数（）{
新图表（此为$el{
type:this.type，
数据：{
标签：这个标签，
数据集：[{
标签：“#投票数”，
数据：这个数据，
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
}) 
}
}
});
新Vue({
el:“#应用程序”，
数据：{
消息：“测试”，
标签：[]，
数据：[]，
加载：false
},
方法：{
fetchData:function（）{
这是.http.get（'/admin/fetch_data'）。然后（res=>{
this.labels=res.body[0]；
this.data=res.body[1]；
this.loaded=true；
})
}
},
创建（）{
this.fetchData（）
}
});

html

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


{{message}}


在根vue实例中添加一个属性
loaded
设置为false，并将其作为道具传递

将
th.$http.get（）
请求返回的承诺的成功回调中加载的
更改为
true

在
图表中设置一个组件，监视加载的
道具

当加载的
prop
更改为
true时，调用
drawChart
方法`