ошибка: невозможно прочитать свойство 'querySelectorAll' со значением NULL - PullRequest
Новая
       11

ошибка: невозможно прочитать свойство 'querySelectorAll' со значением NULL

0 голосов
/ 29 апреля 2020

Я пытаюсь построить график с библиотеками на nuxt

Я ищу чартист, но пока он не работает.

Диаграмма ссылок: https://gionkunz.github.io/chartist-js/getting-started.html

Я пытаюсь воспроизвести диаграмму, выполнив начальную часть.

В моем компоненте я делаю это: 

<template>
  <canvas class="ct-chart ct-perfect-fourth" />
</template>

export default {
  created() {
    this.creatChart();
  },
  methods: {
    creatChart() {
      const data = {
        // A labels array that can contain any sort of values
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        // Our series array that contains series objects or in this case series data arrays
        series: [
          [5, 2, 4, 2, 0]
        ]
      }
      const chart = new Chartist.Line('.ct-chart', data);
      return chart;
    },
  },
}

И я получаю эту ошибку: Не удается прочитать свойство 'querySelectorAll' со значением NULL

Конечно, чартист установлен с npm ...

1 Ответ

1 голос
/ 29 апреля 2020

Вместо created() {} для инициации вашего чартиста, вы должны использовать метод mounted() {} для инициации вашего графика только на стороне клиента. 

mounted() {
  this.creatChart();
},

Хук "созданный" будет запускаться дважды один раз на на стороне сервера, затем один раз на стороне клиента. «Подключенный» будет запущен только один раз на стороне клиента.

Диаграмма доступна только на стороне клиента (в браузере) из-за использования document.querySelectorAll.

Но на сервере сторона (Node.js), document не существует ... что объясняет вашу ошибку Cannot read property 'querySelectorAll' of null.

...