1๐
You have a few mistakes in your code. First if you want to call a method from child component you have to use special attribute ref
. Please see more about ref.
So in your code it should be:
<template>
...
<chart ref='chart' :chart-data="datacollection"></chart>
...
</template>
<script>
...
this.$refs.chart.render() // Not Chart.render()
...
</script>
Second you have a typo in your Chart.js:
this.chartData // Not this.chartdata
So this means yours render
method in mounted
is not working and unnecessary. Your chart is already drawn by reactiveProp
after you set chartData
prop.
But unfortunately this:
this.datacollection.labels.push(13);
still not work. If you looking at the source code here you will see the library use watcher on chartData
only. It means if you change entire of chartData
this will work fine (as it works at first drawn). Please see more about watcher.
So if you want to rely on reactiveProp
then when you want update labels
you should set:
this.datacollection = {
...this.datacollection,
labels: this.datacollection.labels.concat(13) // avoid to mutate data
}
4๐
What helped me was adding a v-if="loaded"
, which you will set to false
before your change. Then, after your change, set it to false
.