使用vue.js加载远程数据时，c3.js图表​​不会更新

Question

目前我有一个使用vue和c3的组件。 c3图表立即呈现，但我仍然通过ajax获取数据。如何延迟组件的渲染？或者一旦获取数据，然后显示图表。

我的代码很简单。

<my-chart :chartdata="chart.data"></my-chart> etc.

注意：如果我输入静态数据 - 它会完美呈现。

的jsfiddle https://jsfiddle.net/1o4kqjwd/3/

Answer 1

首先，在v-if代码中添加<my-chart>指令，仅在加载小提琴中的数据（mydata）时才呈现它：

<my-chart :chartdata="mydata" v-if="mydata"></my-chart>

其次，在my-chart的组件定义中，您需要向mydata添加一个观察者，以便在drawChart()时调用渲染方法（mydata，在您的小提琴中）变化：

watch: {
  mydata() {
    this.drawChart();
  }
},

最后，您可以在父Vue定义中将ajax调用放在自己的方法中。这样，您可以在mounted()生命周期钩子中调用它，然后从该实例范围内的任何位置调用它：

methods: {
  fetchData() {
    var self = this;  

    this.$http.get('yoururl').then(function(response) {
      let chartData = response.data;

      // do any formatting to chartData here

      self.data = chartData;
    })
  }
}