error : Cannot read property 'querySelectorAll' of null

Question

我正在尝试用 nuxt 上的库制作图表

我想使用 chartist，但它现在不起作用。

Link 图表师：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;
    },
  },
}

我收到此错误：无法读取 null

的 属性 'querySelectorAll'

当然chartist是用npm安装的...

Answer 1

您必须使用 mounted() {} 方法仅在客户端初始化您的图表，而不是 created() {} 来初始化您的图表。

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

"created" 挂钩将 运行 两次，一次在服务器端，然后一次在客户端。 "mounted" 在客户端只会 运行 一次。

Chartist 仅在客户端（浏览器）可用，因为使用了 document.querySelectorAll。

但是在服务器端 (Node.js)，document 不存在...这解释了 Cannot read property 'querySelectorAll' of null.

的错误