[Vuejs]-What is error can't acquire context from the given item?

by

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', {...

Leave a comment