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() рендеринг SVGэлементы в div#plotly-graph

Но когда 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());
},