时间戳

首页 > 解决方案 > 如何更新 vue2-frappe 图表？

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

问题描述

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

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

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

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

有人知道该怎么做吗？

标签： vue.jsvuejs2

解决方案

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

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 撰写的上述文章还指出，他认为最好的方法是更改​​密钥，我认为我们都应该意识到这一点。

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

推荐阅读