【踩坑笔记】vue3 element-plus el-input 无法输入问题

原创已于 2022-10-08 03:52:26 修改 · 9.4k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2022-10-08 03:42:04 首次发布

本文解决Vue3中El-Form组件使用v-model与ref名称冲突导致无法输入的问题，并提供正确示例代码。

原因是 el-form 的 v-model="loginForm" ref="loginForm" 在vue3中值不能相同

把ref去掉或者改名即可

这是js的代码（对象记得用reactive，不然也会无法输入）

import { reactive } from 'vue';

const loginForm = reactive({
  username: '',
  password: '',
});

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
  ],
});

这个是可以输入的

<el-form
  :model="loginForm"
  :rules="rules"
  ref="loginData">
    <el-form-item prop="username" label="Email">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
</el-form>

这是无法输入的

<el-form
  :model="loginForm"
  :rules="rules"
  ref="loginForm">
    <el-form-item prop="username" label="Email">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
</el-form>

就改了个ref