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

好的，您正在同步调用this.renderGraph()，然后Vue才能更新DOM。

尝试将this.renderGraph()延迟$nextTick()：

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

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

1 个答案: