原因是 el-form 的 v-model="loginForm" ref="loginForm" 在vue3中值不能相同
把ref去掉或者改名即可
这是js的代码(对象记得用reactive,不然也会无法输入)
javascript
import { ref,reactive } from 'vue';
const ruleForm=reactive({
username:'',
password:'',
})
//定义表单校验规则
const rules =reactive({
username:[
{required:true,massage:'请输入用户名',trigger:'blur'},
{min:5,max:16,message:'请输入长度5~16非空字符',trigger:'blur'}
],
password:[
{required:true,massage:'请输入密码',trigger:'blur'},
{min:5,max:16,message:'请输入长度5~16非空字符',trigger:'blur'}
],
})
这个是可以输入的
javascript
<el-form :model="ruleForm" :rules="rules" ref="ruleData" label-width="100px" class="demo-ruleForm">
<h3>系统登录</h3>
<el-form-item label="账号" prop="username">
<el-input placeholder="请输入账号" v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input placeholder="请输入密码" type="password" v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
这是无法输入的
javascript
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<h3>系统登录</h3>
<el-form-item label="账号" prop="username">
<el-input placeholder="请输入账号" v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input placeholder="请输入密码" type="password" v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>