V-斗篷的Vue.js生命周期挂钩

Question

I'm working on a project where v-cloak is styled with display: none , and decorates the body. This means everything is hidden until the Vue instance is ready.

I've made a component that inserts a chart (using highcharts ). The component is inserted on ready , yet the chart does not display correctly.

Here is a jsfiddle demonstrating the problem .

I could solve the problem by polling until the element is displayed, but is there a more elegant solution?

Answer 1

Use Vue's nextTick to inject the chart, this will guarantee that the DOM is ready to be updated:

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

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