ApexCharts & Vue - 更改道具值不会更新图表组件中的图表

Question

我在单独的组件中有一个 ApexCharts 图表，系列值作为道具传入。

我的父组件在 beforeMount() 中进行了一些计算，它确定了作为 prop 的数组中的值。

我不知道为什么，但它没有动态更新。 ApexCharts 文档说：

You don't actually need to call updateSeries() or updateOptions() manually

我希望 Vue 像这样自动更新值。

我已经通过在父组件中显示作为 prop 传递的变量进行了检查，并且在进行计算后值正在更新。在这之后，我是否需要对 'push' 这些通过子组件做一些额外的事情？

Answer 1

我找到了一个解决方法，但它不会自动更新仍然让我感到惊讶。

发件人：https://michaelnthiessen.com/force-re-render/

如果我为组件分配一个键，就像这样：

<Chart :values='this.values' :key="componentKey" />

export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;
    }
  }
}

然后在我为 this.values 完成计算后调用 forceRerender() 方法，一切似乎都很好——图表显示了计算的 prop 的正确值。

ApexCharts & Vue - 更改道具值不会更新图表组件中的图表

ApexCharts & Vue - changing prop values does not update chart in chart component

vue.js

apexcharts