$nextTick使用场景
目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失
注意:一定要用 v-if 来写( 保证DOM异步更新前获取不到输入框,体现 $nextTick 价值 )
<template>
<div>
<!-- input 和 button 是互斥关系 v-if v-else -->
<input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
<!-- autofocus -->
<button v-else @click="btn">点击我进行搜索</button>
</div>
</template>
<script>
export default {
data () {
return {
isShow:false,
}
},
methods: {
btn(){
this.isShow = true
// 原因: data变化更新DOM是异步的
// 输入框还没有挂载到真实DOM上前,this.$refs.myInp 的值是 undefined
// 解决: this.$nextTick(), DOM 更新后在调用 DOM 元素的方法
this.$nextTick( () => {
// 通过 js 方式主动获取焦点
this.$refs.myInp.focus()
})
}
}
}
</script>
<style>
</style>