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

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

相关推荐
打瞌睡的朱尤8 小时前
Vue day10 完整购物网页(登录页,首页,搜索)
前端·javascript·vue.js
扶苏10029 小时前
深入理解 Vue 3 的 watchEffect
前端·javascript·vue.js
yanlele11 小时前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
打瞌睡的朱尤12 小时前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js
cc.ChenLy16 小时前
【CSS进阶】毛玻璃效果与代码解析
前端·javascript·css
何中应16 小时前
使用Jenkins部署前端项目(Vue)
前端·vue.js·jenkins
西门吹-禅16 小时前
node js 性能处理
开发语言·javascript·ecmascript
一只大侠的侠16 小时前
React Native for OpenHarmony:日期范围选择器实现
javascript·react native·react.js
EstherNi17 小时前
仿照elementui写图片放大的案例,但多加了下载按钮,vue3
javascript·vue.js·elementui
一只大侠的侠18 小时前
React Native for OpenHarmony:DatePicker 日期选择器组件详解
javascript·react native·react.js