Vue变量修改如何实时更新dom

Question

想要实现点击按钮，在界面上生成一个div，然后在div中显示echarts图表

div元素使用v-for，点击按钮就向数组变量blocks添加一个元素，然后该div的id设置为dev{数组变量中的索引}，但是生成图表时，显示找不到这个div

个人猜测应该是向blocks添加元素时，v-for并未执行更新，所以这个div找不到

所以该如何解决呢？

div元素

 <div v-for="(item, index) in blocks" :id="`dev${index}`" class="block resize-drag" :style="`left:${blocks[index].pos.left}`"></div>
        

按钮

<div v-show="blocks.length == 0" id="init_panel" class="block add">
    <div id="add_block">
        <span class="big_font" @click="confirmAdd">+</span>
        <span class="add_button">添加图表</span>
    </div>
</div>

添加元素的方法

confirmAdd(){
    let that = this;
    let index = that.blocks.length;
    that.blocks.push({type: that.form.type});
    if(that.form.type == 'on_time'){
      let that = this;
      let on_time_chart = document.getElementById('dev' + (that.blocks.length - 1));
      console.log('dev' + (that.blocks.length - 1));
      that.on_time_chart = that.$echarts.init(on_time_chart);
      that.on_time_chart.setOption(that.rate_option);
    }
},

怎样才可以显示出图表呢，先行谢过

Answer 1

push 之后的都写在 this.$nextTick(() => {...}) 里