这是一个在使用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操作。