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

原因是 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>
相关推荐
minos.cpp2 小时前
《Java并发编程的艺术》笔记 —— 第一章
java·笔记·idea
青椒大仙KI112 小时前
24/11/5 算法笔记 DBSCAN聚类算法
笔记·算法·聚类
漫天转悠7 小时前
Uniapp在Vue环境中引入iconfont图标库(详细教程)
前端·vue.js·uniapp
二狗mao7 小时前
Uniapp的学习
前端·vue.js·uni-app
瑞金彭于晏8 小时前
墨菲定律是什么?超详细+举例子+通俗易懂版!
笔记
我是汉堡请多指教8 小时前
网络学习笔记---客户端和服务端
笔记
FF_y9 小时前
Hive学习笔记
hive·笔记·学习
前端李易安10 小时前
如何封装一个axios,封装axios有哪些好处
前端·vue.js·axios
cbldzz11 小时前
【Python 学习笔记】json
笔记·学习·json