Vue.js 更改数据和重新渲染时间？

Question

我是 Vue.js 的新手。

我想在方法中更改数据，并根据数据更改视图。

// template
<div v-if="currentGraphType.type === 'foo'">
  <!-- Some other graphs -->
</div>
<div v-else id="plotly-graph" />

// methods
onClickGraphType(graphType: { type: string, name: string }) {
  this.currentGraphType = graphType;
  this.renderGraph();
},

renderGraph() 在 div#plotly-graph

中呈现 svg 元素

但是当执行 onClickGraphType 并将 currentGraphType 更改为 'foo' 时，图形不会呈现。

我认为 <div v-else id="plotly-graph" /> 在执行 this.renderGraph() 之前以某种方式未呈现。

我是否误解了 Vue.js 数据的工作原理？

Answer 1

好的，在 Vue 更新 DOM.

之前，您正在同步调用 this.renderGraph()

尝试用 $nextTick() 延迟 this.renderGraph():

onClickGraphType(graphType: { type: string, name: string }) {
  this.currentGraphType = graphType;
  this.$nextTick(() => this.renderGraph());
},

Vue.js 更改数据和重新渲染时间？

Vue.js changing data and re-rendering timing?

plotly

vue.js

vuejs2

plotly.js