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

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

相关推荐
网络点点滴9 分钟前
透传属性$attrs
前端·javascript·vue.js
Moment25 分钟前
尤雨溪宣布 Vite+ 正式开源,前端工具链要大一统了
前端·javascript·面试
喵叔哟27 分钟前
5. 【Blazor全栈开发实战指南】--Blazor组件基础
开发语言·javascript·ecmascript
ujainu1 小时前
Electron 实战:将用户输入保存到本地文件 —— 基于 `fs.writeFileSync` 与 IPC 的安全写入方案
javascript·安全·electron
Lee川2 小时前
React 快速入门:Vue 开发者指南
前端·vue.js·react.js
进击的尘埃2 小时前
基于 LangChain.js 的前端 Agent 工作流编排:Tool 注册、思维链可视化与多步推理的实时 DAG 渲染
javascript
颜酱2 小时前
最小生成树(MST)核心原理 + Kruskal & Prim 算法
javascript·后端·算法
蜡台3 小时前
Node 版本管理器NVM 安装配置和使用
前端·javascript·vue.js·node·nvm
李剑一4 小时前
数字孪生大屏必看:Cesium 3D 模型选中交互,3 种高亮效果拿来就用!
前端·vue.js·cesium
奶昔不会射手4 小时前
自定义vue3函数式弹窗
前端·javascript·css