Ошибка «Cannot read property 'getContext' of undefined». Что это может быть?

Question

[Vladislav Dudashvili]

У меня задача вывести график на сайте, есть такой код:

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
  }
},

Получаю ошибку:

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

Что это может быть?

Answer 1

[0xD34F]

Это может быть отсутствие canvas'a - вы пытаетесь отрендерить график сразу же после создания экземпляра компонента, когда никаких DOM-элементов ещё не создано. Оберните код в watcher'е в nextTick.

Comments

[Vladislav Dudashvili]

Я ни когда им не пользовался, не подскажите как я могу обернуть мой код ?...

[0xD34F]

например

Answer 2

[Aetae]

У вас в вотчере стоит immediate: true, и, так как он задан на самом компоненте, вызван он будет сразу перед хуком created, когда vue-компонент уже создан но ещё не примонтирован. Соответственен никакого canvas на странице в этот момент нет.
Самое простое решение - добавлять вотчер не сразу, а в хуке mounted через this.$watch.