vue.js - 如何更新vue2-frappe图表？

Question

在过去的几个小时里，我一直在为这个问题绞尽脑汁，无论我在哪里寻找，我似乎都找不到答案。

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

问题是，现在我不知道如何重新渲染图表。我尝试替换将图表绑定(bind)到的整个对象，以及操作特定值，但似乎没有任何东西可以使组件重新渲染。

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

有人知道该怎么做吗？

Answer 1

我会尝试强制更新 View 组件。

VueJ 的 react 性有时会令人困惑，您认为它应该对更改使用react，但实际上却没有。

您可以像这样强制 View 更新:

// 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://v2.vuejs.org/v2/guide/list.html#Caveats

注意#

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

注2 上面 Michael Thiessen 写的文章也指出，他认为最好的方法是更改​​ key ，我认为我们都应该意识到这一点。

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