Question

在过去的几个小时中，我一直在努力解决这个问题，无论我在哪里看，我似乎都找不到答案。

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

问题是，现在我不知道如何重新绘制图表。我尝试替换绑定图表的整个对象，以及操作特定的值，但是似乎没有什么可以使组件重新呈现。

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

任何人都知道该怎么做？

Answer 1

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

VueJs的反应性有时会使您认为应该对更改做出反应的地方感到困惑，但事实并非如此。

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

// 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）的上述文章还指出，他认为最好的方法是更改密钥，我想我们所有人都应该知道。

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

如何更新vue2-frappe图表？

1 个答案: