echarts 与 this.$nextTick

这是一个在使用echarts的时候遇到的坑，简单记录下。
在使用echarts中，断不了有多个图来回切换，使用变量来控制切换到那个echarts实例。
于是就有了一个很莫名的报错，显示没办法获取元素的属性。

随后想到这个方法，并且实现了切换。

简单使用方法 ：
使用变量改变dom后，在nextTick回到函数中再调用方法，来获取更新后的dom元素。
小案例：

<template >
  <div class="container">
    <button @click="changeShow(1)">显示p1</button>
    <button @click="changeShow(2)">显示p2</button>
    <p v-if="show == 1" id="p1">我是第一个p标签</p>
    <p v-if="show == 2" id="p2">我是第二个p标签</p>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      show: 1
    };
  },
  methods: {
    
    
    changeShow(i) {
    
    
      this.show = i;
    this.changeSecondP()
    },
    changeSecondP() {
    
    
      let p2 = document.getElementById("p2");
      console.log(p2.innerHTML);
    }
  },
  mounted() {
    
    }
};
</script>
<style  scoped>
</style>

直接点击 显示p2 这个按钮 会有一个警告和报错 并且 console.log(p2.innerHTML) 也是没有执行的

当我们把方法 changeShow 改变一下 加上$nextTick 会有不一样的效果

    changeShow(i) {
    
    
      this.show = i;
      this.$nextTick(() => {
    
    
        this.changeSecondP();
      });
    },

在vue中使用变量来操作dom，对dom进行js操作，例如获取它的内容等等，没有获取到更新后的dom元素，nextTick这个方法将函数执行在dom渲染完成后，在进行js操作。