vue.js - Vue 中的 ApexCharts - 更改 Prop 值不会更新图表组件中的图表

Question

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

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

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

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

我希望 Vue 能够自动更新这样的值。

我已经通过显示作为父组件中的 prop 传递的变量进行了检查，并且这些值在计算完成后正在更新。之后我是否需要做一些额外的事情来将它们再次“推送”到子组件？

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 中的正确值。