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()
  });  
}

posted on 2022-04-11 22:37  路过君  阅读(49)  评论(0编辑  收藏  举报

导航