0👍
Please note that in Vue.js, you can access this.$refs.uniqueName
only after the instance has been mounted.
Therefore, the code responsible for fetching the data and creating the chart should be moved from lifecycle method created
to method mounted
.
mounted() {
Axios.get('/getHomeItem').then(response => {
...
this.sells = response.data.sells;
this.setDate();
...
});
};
UPDATE
Additionally to this, you should define an id
on your canvas
instead of ref
.
<canvas id="myChart" width="532.8" height="250"></canvas>
Then you won’t need var ctx = this.$refs.myChart
. The chart can then be created by simply providing the canvas
id
instead of the rendering context.
new Chart('myChart', {...
- Chartjs-Adding condition in ComponentDidMount to display chart data
- Chartjs-Remove Legends ChartsJS 2.8.0
Source:stackexchange.com