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

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

相关推荐
RONIN1 分钟前
vue2、vue3区别之混入mixins和过滤器filter
vue.js
RONIN25 分钟前
属性透传attribute、vue实例对象方法$nextTick()、虚拟dom与浏览器渲染机制
vue.js
RONIN32 分钟前
vue自定义指令与自定义插件
vue.js
RONIN1 小时前
属性透传attribute与性能优化组件(component、异步组件、keep-alive/Suspense/Teleport/Transition)
vue.js
RONIN1 小时前
组件通讯(父传子、子传父、ref属性、表单双向绑定v-model、兄弟间传值Event Bus、插槽、依赖注入)
vue.js
爱折腾的军哥1 小时前
首发 | OpenTaiji WFGY 防幻觉系统:让 AI Agent 不再"胡说八道"
javascript
颜酱2 小时前
从零实现「拍照记单词」小应用(可复刻版)
前端·javascript·人工智能
大猫会长2 小时前
AudioContext给音频提高音量
前端·javascript·音视频
RONIN2 小时前
vue组件、组件生命周期、组件分离模块化
前端·vue.js
RONIN2 小时前
vue开发环境与基础语法、计算属性、侦听属性
前端·vue.js