vue3---inputRef.value.focus()报错Cannot read properties of null (reading ‘focus‘)

问题描述:点击编辑按钮,出现el-input框(el-input显示隐藏通过v-if控制)

  

<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>
const isEdit=ref(false)
const inputRef=ref(null)

//编辑模型名称
const editModelName = () => {
  isEdit.value = true;
  inputRef.value.focus();
};

解决方法:方法1:添加nextTick函数,因为使用了v-if执行;

  nextTick(() => {
      editModelNameRef.value.focus();
  });

方法2:v-if替换为v-show

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

相关推荐

  1. vue3+ts 引入 json-editor-vue3

    2024-01-27 04:24:01       22 阅读
  2. vue3+ts require

    2024-01-27 04:24:01       59 阅读
  3. vue3在router中使用pinia解决

    2024-01-27 04:24:01       38 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-27 04:24:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-27 04:24:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-27 04:24:01       87 阅读
  4. Python语言-面向对象

    2024-01-27 04:24:01       96 阅读

热门阅读

  1. 【css技巧】css实现边框渐变

    2024-01-27 04:24:01       65 阅读
  2. 张维迎《博弈与社会》笔记(1)序言

    2024-01-27 04:24:01       49 阅读
  3. 844.比较含退格的字符串(力扣LeetCode)

    2024-01-27 04:24:01       46 阅读
  4. 【MySQL事务】MySQL事务初识

    2024-01-27 04:24:01       56 阅读
  5. C# Queryable类

    2024-01-27 04:24:01       49 阅读
  6. vue创建组件和使用

    2024-01-27 04:24:01       56 阅读
  7. 纯c实现栈和队列 数据结构大全

    2024-01-27 04:24:01       56 阅读