【踩坑笔记】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>
相关推荐
小二·24 分钟前
java基础面试题笔记(基础篇)
java·笔记·python
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
wusong9993 小时前
mongoDB回顾笔记(一)
数据库·笔记·mongodb
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
Resurgence033 小时前
【计组笔记】习题
笔记
周全全4 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
pq113_64 小时前
ftdi_sio应用学习笔记 3 - GPIO
笔记·学习·ftdi_sio
ZwaterZ4 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue