vue2 nextTick 改变数据后，基于新创建的DOM元素进行操作

• 错误写法

代码语言：javascript复制

<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>

• 正确写法

代码语言：javascript复制

onClick() {
  this.isEdit = true
  // 使用此函数将在下一次DOM更新结束后调用回调函数
  this.$nextTick(function() {
    this.$refs.txt.focus()
  });  
}

dom

0 人点赞