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

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

相关推荐
早點睡3906 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-calendar-events(读取不到日历里新增的事件,待排查)
javascript·react native·react.js
837927397@QQ.COM22 分钟前
个人理解无界原理
开发语言·前端·javascript
冰暮流星25 分钟前
javascript之Dom查询操作1
java·前端·javascript
取码网1 小时前
2025最新口红机防篡改版本源码
android·java·javascript
网络点点滴2 小时前
Vue3完结- 核心知识总结
vue.js
努力的lpp2 小时前
【小迪安全第14天:前端JS架构信息打点与API接口枚举】
前端·javascript·安全
前端 贾公子2 小时前
解决uni-app 输入框,键盘弹起时页面整体上移问题
前端·vue.js·uni-app
南风知我意9572 小时前
Map 与 WeakMap 深度解析:从内存泄漏到 Vue 3 响应式原理的完整指南
前端·javascript·vue.js
github_czy2 小时前
Vue 3 组件生命周期
前端·javascript·vue.js