Vuejs2 Chartjs（非Vue）不在V-if/V-show内呈现图表

我有一个页面，包含使用chartjs绘制的多个图表。问题是，当我在div中绘制图表时，它被v-if或v-show隐藏，当条件改变并且隐藏的div出现时，图表将不会出现。有什么办法吗。我尝试过使用

update

，但不起作用。图表仅在相关div未隐藏时创建时才显示。

我建议将图表的init函数放在同一个方法中，或者创建一个watcher方法，如负责显示/隐藏元素的方法

比如：

---

如果你还没有，你应该尝试使用。它将处理vue动态数据的所有布线。

---

更改布尔值

showChart

时，将重新呈现或销毁整个外部div内容。如果再次渲染已销毁的

div

，则当

showChart

的时间变为

true

时，也需要初始化图表

我在vue chartjs中也遇到了这个问题。对我有用的是改用v-show

我以前在v-else中使用的块，我知道它添加了一个新的v-if块

加载。。。

但为此，我必须将div隐藏时得到的数据保存在某个位置，并用保存的数据绘制图表。当div被隐藏时，它可以在div出现时出现。请仔细检查DOM，因为我非常确定图表实际上是在隐藏div中呈现的。但是，它没有维度来计算其大小，因此它的大小呈现为0px。无论是在HTML元素本身还是Vue组件上，将数据保存到某个位置都比不保存数据更常见。我建议您使用

v-show

，因为这样您就会知道任何正在发生或在DOM上的更改都是不可见的。如果在向Vue组件添加图表数据时存在硬约束，请尝试在图表容器上创建一个数据属性，如

data chart=“”

   <div v-if="visible">
     <div ref="chartContainer"></div>
   </div>

   .....
   methodThatChangesVisibility () {
     this.visible = true
     this.initChartMethod()
   }

  watch: {
    visible: function (visible) {
      if (visible) this.initChartMethod()
    }
  }