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操作。

猜你喜欢

转载自blog.csdn.net/qq_43291759/article/details/111043225