因为 Vue 并不是数据发生变化之后 DOM 立即变化,而是有一定延迟,因此会出现你拿到的值会出现延迟更新的,于是就出现了 $nextTick() 方法
举个例子:
<template>
<div class="hello">
<div>
<button @click="testClick()" ref="btn">{{testMsg}}</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
testMsg:"原始值",
}
},
methods: {
testClick:function(){
this.testMsg="修改后的值";
console.log(this.$refs.btn.innerText); //that.$refs.btn获取指定DOM,输出:原始值
}
}
}
</script>
解决办法:
<template>
<div class="hello">
<div>
<button @click="testClick()" ref="btn">{{testMsg}}</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
testMsg:"原始值",
}
},
methods: {
testClick: function () {
this.testMsg = "修改后的值";
this.$nextTick(function () {
console.log(this.$refs.btn.innerText); //输出:修改后的值
});
}
}
}
</script>
一定要把例子拿下面实现一遍,然后打开控制台对比一下就懂了