首页 > 解决方案 > vuex 提交时超出了最大 calstack 大小

问题描述

我这里有这个错误

在此处输入图像描述

我可以将错误限制在此行

  mounted() {
    this.$nextTick(() => {
      let ctx = this.$refs.canvas.getContext('2d')
      let { chartType, dataOptions } = this.module
      this.chart = new Chart(ctx, {
        type: chartType,
        data: dataOptions,
        options: minimizeOptions,
      })
    })
  },

错误来自dataOptions. 如果我将数据设置为{}一切正常,但显然我的图表没有数据。

this.module是传递给我的组件的道具。v-for组件本身在循环中呈现

    <module
      v-for="mod in modules"
      :module="mod"
      :key="mod._id.toString()"
    />

我在这里使用 Chart.js。

我找不到此调用堆栈超出错误的原因。

也许有人有类似的问题?

我还需要提到,当我想切换放置在布局中的全局组件时会发生此错误layout

dataOptions

{
   datasets: [
      {
          backgroundColor: "#34495e",
          borderColor: "bdc3c7",
          data: [0],
          label: "My first dataset"
      }
   ],
   labels: ["Start"]
}

标签: javascriptvue.jsnuxt.js

解决方案


我实际上不需要对这个道具做出反应,所以我决定冻结它。

  let { chartType, dataOptions } = Object.freeze(this.module);

反应性也消失了错误。这解决了我的问题。

也许有人有反应数据的解决方案


推荐阅读