javascript - v-cloak 的 Vue.js 生命周期钩子(Hook)

Question

我正在做一个项目，其中 v-cloak使用 display: none 样式，并装饰主体。这意味着在 Vue 实例准备就绪之前，一切都是隐藏的。

我制作了一个插入图表的组件(使用 highcharts )。组件已插入 ready，但图表显示不正确。

这是一个jsfiddle demonstrating the problem .

我可以通过轮询直到显示元素来解决问题，但是有没有更优雅的解决方案？

Answer 1

使用 Vue 的 nextTick 注入(inject)图表，这将保证 DOM 已准备好更新:

ready: function() {
  this.$nextTick(function() {
        this.chart = new Highcharts.Chart(this.opts);
  });
}

http://jsfiddle.net/crabbly/hje7bqrn/