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

まず、データ（mydataは、あなたのフィドルに）ロードされたときに、それをレンダリングするだけに<my-chart>タグにv-ifディレクティブを追加します。

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

第二に、中my-chartのコンポーネント定義の場合、mydataにウォッチャーを追加して、いつでもレンダリングメソッド（drawChart()、あなたのフィドルで）を呼び出す必要があります。mydataの変更：

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

最後に、あなたが親Vueの定義に独自の方法でAJAX呼び出しを置くことができます。このように、あなたはmounted()ライフサイクルフックでそれを呼び出し、その後どこにもそのインスタンスのスコープ内から可能：AJAX呼び出しを仮定

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