vue3---inputRef.value.focus()报错Cannot read properties of null (reading ‘focus‘)

问题描述:点击编辑按钮,出现el-input框(el-input显示隐藏通过v-if控制)

html 复制代码
<el-input ref="inputRef" v-if="isEdit" v-model="modelName"  @blur="isEdit = false" />
<el-button text class="btn-wrapper" v-show="!isEdit">
    <svg-icon @click="editModelName" icon-class="edit" />
</el-button>
javascript 复制代码
const isEdit=ref(false)
const inputRef=ref(null)

//编辑模型名称
const editModelName = () => {
  isEdit.value = true;
  inputRef.value.focus();
};

解决方法:方法1:添加nextTick函数,因为使用了v-if执行;

javascript 复制代码
  nextTick(() => {
      editModelNameRef.value.focus();
  });

方法2:v-if替换为v-show

道理简单,却总是容易忽略,警戒!

相关推荐
Smile_254220418几秒前
vue3 + ts reactive方式清空表单对象
开发语言·前端·javascript
ZC跨境爬虫36 分钟前
跟着 MDN 学CSS day_31:(精通链接样式,从伪类到导航菜单)
前端·javascript·css·ui·交互
香香爱编程1 小时前
vue3自定义顶部弹窗
前端·javascript·vue.js
蜡台1 小时前
Vue Echart 的 **高阶组件化** 封装思路
前端·javascript·vue.js·echarts
xuankuxiaoyao1 小时前
vue.js 路由第二篇
前端·javascript·vue.js
一 乐1 小时前
图书电子商务网站系统|基于SprinBoot+vue图书电子商务网站设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·图书电子商务网站系统
开开心心就好1 小时前
解决图片无页码添加功能的实用工具
javascript·python·安全·智能手机·pdf·音视频·1024程序员节
zhangyao94033012 小时前
开发pc端时,表格的高度怎么设置才能铺满页面
前端·javascript·elementui
XinZong13 小时前
实测OpenClaw虾淘:全民工具AI时代,冷门非工具类的Skill还能出圈吗?
javascript
烛衔溟13 小时前
TypeScript 类的类型 —— 作为类型使用
javascript·ubuntu·typescript