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

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

相关推荐
新中地GIS开发老师41 分钟前
零基础WebGIS开发入门 | GeoJSON数据持久化
前端·javascript·gis·webgis·三维gis开发
blns_yxl1 小时前
正则驱动实时表单验证(HTML+CSS+JS+正则)
javascript·css·html
Quz2 小时前
QML 与 JavaScript 交互方式:内联函数、外部文件、信号槽与工作线程
javascript·qt
达子6662 小时前
第10章_HarmonyOs开发图解 用JS开发UI
vue.js
Allshadow2 小时前
Nest.js - 连接数据库
javascript·nestjs
冰暮流星2 小时前
javascript之date对象
开发语言·javascript·ecmascript
橘子星2 小时前
别光看教程!手把手拆解 React Todo 项目,一文吃透 5 个核心概念
前端·javascript
奶糖 肥晨2 小时前
想return数据 返回的确是函数问题处理
vue.js
蜡台2 小时前
使用 uni-popup 实现数据选择器Data-Picker
前端·javascript·html·uniapp·uni-popup·data-picker
blns_yxl3 小时前
Promise封装Fetch + 重试机制(HTML+JS)
前端·javascript·html