如何更新vue2-frappe图表？

Question

在过去的几个小时里，我一直在为这件事绞尽脑汁，不管我往哪里看，我似乎都找不到答案。

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

问题是，现在我不知道如何使图表改进机。我试图替换绑定图表的整个对象，以及操作特定的值，但是似乎没有什么能使组件重定向。

在frappe.js的文档中，您可以通过具体方法修改数据，但这是Vue，我不能像在普通.js中那样只调用chart.update()。如果我通过vue dev工具检查组件，我可以看到它包含修改过的数据，它只是不重新绘制自己。

有人知道该怎么做吗？

Answer 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的docs：https://v2.vuejs.org/v2/guide/list.html#Caveats中所概述的，这种方法有一些注意事项。

Note #

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

注释2，，上面由Michael撰写的文章，也指出了在他看来最好的方法是关键的改变，我认为我们都应该意识到这一点。

我希望这能让你走上正轨。听起来像是(使用有限的信息)您可以替换数据，但使用相同的键。