錯誤......不能讀取屬性'querySelectorAll'的null。不能读取null的属性'querySelectorAll'。

Question

我想用nuxt上的库来做一个图。

我想用chartist，但暂时用不上。

链接chartist.github.iochartist-jsgetting-started.html https:/gionkunz.github.iochartist-jsgetting-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;
    },
  },
}

然后我收到了这个错误。Cannot read property 'querySelectorAll' of null.

当然chartist是和npm一起安装的...

Answer 1

而不是 created() {} 来启动您的Chartist，您必须使用 mounted() {} 方法，只在客户端启动图表。

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

创建 "钩子将在服务器端运行两次，然后在客户端运行一次。挂载 "方法将只在客户端运行一次。

Chartist只在客户端(浏览器)可用，这是因为使用了 document.querySelectorAll.

但在服务器端（Node.js）。document 不存在......这就解释了你的错误。Cannot read property 'querySelectorAll' of null.