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

原因是 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