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

逆旅行天涯2024-10-01 23:04

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