Vue 3图表js导致无法读取null的属性（读取'getContext'）？

Question

我有一个按钮可以切换传递到此 ChartComponent 的数据。如果在切换和重新切换后按住任何几秒钟，那么它就可以工作，但如果我们做得有点快，那就是原因 无法读取 null 的属性（读取“getContext”）？错误。

<template>
  <canvas></canvas>
</template>

<script>
import { defineComponent } from 'vue'
import Chart from 'chart.js/auto'

export default defineComponent({
  name: 'ChartComponent',
  props: {
    type: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data: () => ({
    chart: null,
  }),
  watch: {
    data: {
      handler() {
        this.chart.destroy()
        this.renderChart()
      },
      deep: true,
    },
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      this.chart = new Chart(this.$el, {
        type: this.type,
        data: this.data,
        options: this.options,
      })
    },
  },
})
</script>

Answer 1

在使用 Vue3“toRaw”函数访问 this.chart 之前，您应该解开/取消代理它：

<template>
  <canvas></canvas>
</template>

<script>
import { defineComponent } from 'vue'
import Chart from 'chart.js/auto'

export default defineComponent({
  name: 'ChartComponent',
  props: {
    type: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data: () => ({
    chart: null,
  }),
  watch: {
    data: {
      handler() {
        this.chart.destroy()
        this.renderChart()
      },
      deep: true,
    },
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      this.chart = new Chart(this.$el, {
        type: this.type,
        data: this.data,
        options: this.options,
      })
    },
  },
})
</script>

Answer 2

你是该死的大师，我失去了解决这个问题的机会，我找到了这篇文章。

谢谢！！！！！！