11 .$nextTick
于2022-10-12 15:48:46发布
35
如上图,实现这个功能。当我们点击按钮的时候,让input框显示并且让它自动对焦。
代码 :
<template>
<div class="hello">
<button v-if='isShowButton' @click="setButton">show input</button>
<input ref="input" v-else type="text">
</div>
</template>
<script>
export default {
data(){
return {
isShowButton : true,
}
},
methods : {
setButton(){
this.isShowButton = false;
this.$refs.input.focus();
}
}
}
</script>
执行后会发现报错 :
原因是this.isShowButton = false;执行完后,页面并没有立刻更新,此时html的页面上并没有input,所以继续往下执行this.$refs.input.focus();则会报错。解决办法是当页面完全更新后在执行this.$refs.input.focus();
此时就可以用$nextTick,它能保证页面当前是更新之后的。修改代码如下 :
<template>
<div class="hello">
<button v-if='isShowButton' @click="setButton">show input</button>
<input ref="input" v-else type="text">
</div>
</template>
<script>
export default {
data(){
return {
isShowButton : true,
}
},
methods : {
setButton(){
this.isShowButton = false;
this.$nextTick(()=> { //这里!!!
this.$refs.input.focus();
});
}
}
}
</script>