vue3 element plus el-input 无法输入问题

原创已于 2022-10-21 11:27:02 修改 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#element plus

于 2021-11-11 14:42:39 首次发布

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了在使用 Vue3 和 Element Plus 进行前端开发时遇到的 el-input 输入框无法输入的问题及解决方案。问题根源在于 ref 和 v-model 的误用，通过调整代码，将 ref 更改为其他名称，以及正确使用 v-model 解决了冲突。

最近用vue3 element plus 进行开发，发现el-input 无法输入，代码如下：

<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <el-form ref="searchForm" :model="searchForm" label-width="80px">
          <el-form-item label="成员">
            <el-input :model="searchForm.memberKey" placeholder="请输入成员姓名/员工ID/手机号码"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-card>
</template>

<script setup>
import { reactive } from 'vue'
// 搜索参数
const searchForm = reactive({
  memberKey: ''
})
</script>

排查许久，发现主要有两个原因

1、ref="searchForm"和:model="searchForm", 相同的searchForm导致冲突了。

2、element plus 官方文档el-form 用的是:model,很容易el-input 就跟着写:model, 应该用v-model