Error "Cannot read property 'getContext' of undefined". What could it be?

Question

Vue.js

I have a task to display a graph on the site, there is such a code:

watch: {
  dataset: {
    handler(newValue, oldValue) {
            if (newValue && newValue.length) {
      
      console.log(this.immediate);
      let chartData = {
        labels: [],
        datasets: [
          {
            label: "Data 1",
            backgroundColor: 'red',
            /* showLine:true, */
            data: this.dataset,
          },
        ],
      };
      this.dataset.forEach((item) => {
        chartData.labels.push(item.x);
        chartData.datasets[0].data.push(item.y);
      });
      this.renderChart(chartData, {
        responsive: true,
        maintainAspectRatio: false,
        title: {
          display: true,
          text: "My Data",
        },
      });
    }
    },
    immediate: true
  }
},

I am getting an error:

Uncaught (in promise) TypeError: Cannot read property 'getContext' of undefined

What could it be?

Answer 1

It could be the lack of canvas - you are trying to render the graph immediately after the component is instantiated, when no DOM elements have been created yet. Wrap the watcher code in nextTick .