如何更新 vue2-frappe 图表？答案

【问题标题】：How to update vue2-frappe chart?如何更新 vue2-frappe 图表？
【发布时间】：2019-05-31 06:51:16
【问题描述】：

在过去的几个小时里，我一直在为此烦恼，无论我在哪里看，似乎都找不到答案。

我使用vue2-frappe 作为我的图表库。我正在使用一个简单的条形图按天显示某些值。一切都很好，直到我的上级决定他们想在这张图表上显示一整年的价值，这意味着我必须给它添加一些分页。

问题是，现在我无法弄清楚如何重新渲染图表。我尝试替换将图表绑定到的整个对象，以及操作特定值，但似乎没有任何东西可以使组件重新呈现。

在 frappe.js 的文档中，您可以通过 specific methods 修改数据，但这是 Vue 我不能像在普通 .js 中那样只调用 chart.update()。如果我通过 vue 开发工具检查组件，我可以看到它包含修改后的数据，它只是不会重绘自身。

有人知道该怎么做吗？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

我会尝试强制更新视图组件。

VueJ 的反应性有时会让人感到困惑，您认为它应该对更改做出反应，但事实并非如此。

您可以像这样强制更新视图：

// Globally
import Vue from 'vue';
Vue.forceUpdate();

// Using the component instance
export default {
    methods: {
        methodThatForcesUpdate() {
        // ...
        this.$forceUpdate();  // Notice we have to use a $ here
        // ...
    }
  }
}

您可以在此处阅读有关重新渲染的正确方法：https://michaelnthiessen.com/force-re-render

vueJs 的文档中概述了这种方法的一些注意事项：https://vuejs.org/v2/guide/list.html#Caveats

注意#

强制重新渲染不会更新计算值，但您的计算属性不应包含任何外部非反应变量。

注意 2 Michael Thiessen 撰写的上述文章还指出，他认为最好的方法是更改密钥，我认为我们都应该意识到这一点。

我希望这能让您走上正轨。听起来（信息有限）您可以替换数据但使用相同的密钥。

【讨论】：

好的，谢谢！换钥匙就够了。我之前尝试过 forceUpdate()，阅读了您在此处链接的同一篇文章，但由于某种原因忘记了密钥。
乐于助人:)