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

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

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

Что это может быть?
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега Vue.js
Это может быть отсутствие canvas'a - вы пытаетесь отрендерить график сразу же после создания экземпляра компонента, когда никаких DOM-элементов ещё не создано. Оберните код в watcher'е в nextTick.
Ответ написан
Aetae
@Aetae
Тлен
У вас в вотчере стоит immediate: true, и, так как он задан на самом компоненте, вызван он будет сразу перед хуком created, когда vue-компонент уже создан но ещё не примонтирован. Соответственен никакого canvas на странице в этот момент нет.
Самое простое решение - добавлять вотчер не сразу, а в хуке mounted через this.$watch.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы