vue2 nextTick 改变数据后,基于新创建的DOM元素进行操作
- 错误写法
<template>
<div>
<button @click="onClick">edit</button>
<input v-show="isEdit" type="text" ref="txt"/>
<div>
<template>
<script>
export default {
data() {
return {
isEdit: false
}
},
methods: {
onClick() {
this.isEdit = true
// 输入框需要在生命周期update阶段才会显示出来,此时尚未显示,调用focus无效
this.$refs.txt.focus()
}
},
}
</script>
- 正确写法
onClick() {
this.isEdit = true
// 使用此函数将在下一次DOM更新结束后调用回调函数
this.$nextTick(function() {
this.$refs.txt.focus()
});
}