前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue2 nextTick 改变数据后,基于新创建的DOM元素进行操作

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

作者头像
路过君
发布2022-04-13 13:41:22
3100
发布2022-04-13 13:41:22
举报
文章被收录于专栏:路过君BLOG from CSDN
  • 错误写法
代码语言: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()
  });  
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022/01/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档