D3.js c3.js图表不'；使用vue.js加载远程数据时无法更新

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

我的代码非常严格

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

等。

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

JSFIDDLE

---

首先，在

标记中添加一个

v-if

指令，以便仅在加载数据（

mydata

，在您的小提琴中）时呈现它：

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

最后，您可以将ajax调用放在父Vue定义的自己的方法中。这样，您可以在

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

---

假设ajax调用返回一个承诺，在

中初始化c3，然后

。如果生成c3的逻辑在组件中，我如何在ajax调用后初始化c3？ajax是否调用生命周期事件，如

已装入

或

已创建

。如果这与上一个问题相同，请在

挂载的
中创建ajax并在回调中初始化c3。您不能只执行
？@thanksd好主意。但是，如果我想激活API并更新图表，这将不起作用。我认为属性的名称是watch，而不是watchers:
watch:{mydata:（）=>{…}
你说得对，这是一个输入错误。谢谢您可能不是建议这样做，但仅供参考，在这种情况下，您不应该使用箭头函数，因为您将失去
此
的上下文。看见
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;
    })
  }
}