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

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

相关推荐
Qhappy23 分钟前
某里连线九宫格图片wasm解密&识别
javascript
_大学牲30 分钟前
🫡我在掘金写文章:一气之下开源 视频转无水印GIF 插件
前端·javascript
地方地方31 分钟前
深入理解 instanceof 操作符:从原理到手动实现
前端·javascript
渣哥1 小时前
事务崩了别怪数据库!三大核心要素没掌握才是根本原因
javascript·后端·面试
渣哥1 小时前
你以为自动开启?Spring 事务支持其实还需要这几步!
javascript·后端·面试
诗书画唱1 小时前
Fabric.js 完全指南:从入门到实战的Canvas绘图引擎详解
运维·javascript·fabric
颜酱1 小时前
理解 Webpack 的构建过程(实现原理),并实现一个 mini 版
前端·javascript·webpack
aesthetician2 小时前
Node.js 24.10.0: 拥抱现代 JavaScript 与增强性能
开发语言·javascript·node.js
前端老鹰2 小时前
解锁 JavaScript 字符串补全魔法:padStart()与 padEnd()
前端·javascript
漫天星梦2 小时前
简约版3D地球实现,多框架支持
前端·vue.js