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

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

相关推荐
叫我一声阿雷吧13 分钟前
JS 入门通关手册(44):宏任务 / 微任务 / Event Loop(前端最难核心,面试必考
javascript·宏任务·event loop· 前端面试· 微任务· 事件循环·js单线程
We་ct15 分钟前
LeetCode 172. 阶乘后的零:从暴力到最优,拆解解题核心
开发语言·前端·javascript·算法·leetcode·typescript
军军君0115 分钟前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
吴声子夜歌39 分钟前
ES6——Iterator和for...of循环详解
前端·javascript·es6
小李子呢021143 分钟前
前端八股3---ref和reactive
开发语言·前端·javascript
踩着两条虫1 小时前
VTJ.PRO AI + 低代码实战:接入高德地图
前端·vue.js·ai编程
xiaotao1311 小时前
Vite 与 Webpack 开发/打包时环境变量对比
前端·vue.js·webpack
web_小码农1 小时前
CSS 3D动画 旋转木马示例(带弧度支持手动拖动)
javascript·css·3d
Armouy1 小时前
Electron:核心概念、性能优化与兼容问题
前端·javascript·electron
F2E_Zhangmo1 小时前
react native如何发送蓝牙命令
javascript·react native·react.js