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

【问题标题】：ApexCharts & Vue - changing prop values does not update chart in chart componentApexCharts & Vue - 更改道具值不会更新图表组件中的图表
【发布时间】：2021-08-06 00:20:48
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： vue.js apexcharts

【解决方案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 的正确值。

【讨论】：