Currently I have a component using vue and c3. The c3 chart renders immediately, however I am still grabbing the data via ajax. How do I delay the rendering of the component? OR once the data is fetched THEN display the chart.
My code is pretty straighforward.
<my-chart :chartdata="chart.data"></my-chart> etc.
Note: If I enter static data - it renders perfectly.
JSFIDDLE https://jsfiddle.net/1o4kqjwd/3/
First, add a v-if directive to the <my-chart> tag to only render it when the data (mydata, in your fiddle) is loaded:
<my-chart :chartdata="mydata" v-if="mydata"></my-chart>
Second, in the component definition for my-chart, you need to add a watcher to mydata to call the render method (drawChart(), in your fiddle) whenever mydata changes:
watch: {
mydata() {
this.drawChart();
}
},
Finally, you can put the ajax call in its own method on the parent Vue definition. This way, you can call it in the mounted() life-cycle hook and then subsequently from anywhere within that instance's scope:
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;
})
}
}
watch: { mydata: () => {...}}
this. See stackoverflow.com/questions/43929650/…
then.mountedorcreated. If this is the same thing as your next to last question, inmounted, make the ajax and initialize c3 in the callback.<my-chart v-if="chart.data" :chartdata="chart.data"></my-chart>?