el-input 输入框不能输入值，加强制输入input属性后却校验失效

在网上查找说是加this.$forceUpdate()

   <el-form-item :label="$t('table.password')" prop="password"><el-input v-model="userData.password" :disabled="updateStatus" @input="change($even)" /></el-form-item><el-form-item :label="$t('table.validPwd')" prop="validPwd"><el-input v-model="userData.validPwd" :disabled="updateStatus" /></el-form-item>// 写方法
change(e){this.$forceUpdate()
}

但是加完以后输入框校验出问题。问题肯定出在传值：

原始代码：

<template><el-formref="editFormRef":model="userData":rules="editFormRules"><el-form-item :label="$t('table.username')"><el-input v-model="userData.login" disabled /></el-form-item><el-form-item :label="$t('table.email')" prop="email"><el-input v-model="userData.email" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.firstName')"><el-input v-model="userData.firstName" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.lastName')"><el-input v-model="userData.lastName" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.password')" prop="password"><el-input v-model="userData.password" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.validPwd')" prop="validPwd"><el-input v-model="userData.validPwd" :disabled="updateStatus" /></el-form-item><el-form-item><el-button v-if="updateStatus" type="primary" @click="changeUpdateStatus">{{ $t('table.edit') }}</el-button><el-button v-if="!updateStatus" @click="editDialogCancle">{{ $t('table.cancel') }}</el-button><el-button v-if="!updateStatus" type="primary" @click="editUserInfo">{{ $t('table.submit') }}</el-button></el-form-item></el-form>
</template><script>
import { passwordValid, emailValid, notNullValid } from '@/utils/validate'
import { updateUser, getUserByName } from '@/api/user'
export default {props: {user: {type: Object,default: () => {return {name: '',avatar: '',role: ''}}}},data() {const validatePass = (rule, value, callback) => {if (this.userData.validPwd !== this.userData.password) {callback(new Error('两次输入密码不一致!'))} else {callback()}}return {userData: {password: '',validPwd: ''},updateStatus: true,editFormRules: {email: emailValid,password: passwordValid,validPwd: [{ validator: validatePass, trigger: 'blur' }],role: notNullValid}}},mounted() {this.getUser()},methods: {async getUser() {this.userData = await getUserByName(this.user.name)this.userData.password = ''this.userData.validPwd = ''},changeUpdateStatus() {this.updateStatus = false},editDialogCancle() {this.getUser().then(() => {this.$refs.editFormRef.validate(async valid => {if (!valid) return})})this.updateStatus = true},// 修改用户信息并提交editUserInfo() {this.$refs.editFormRef.validate(async valid => {if (!valid) returnlet pwd = ''if (this.userData.password === '' || this.userData.password === undefined) {pwd = '@ad@cc@123$!@'} else {pwd = this.userData.password}delete this.userData.passworddelete this.userData.validPwdupdateUser(this.userData, pwd).then(() => {this.getUser()this.updateStatus = truethis.$message.success('Update Success')})})}}
}
</script>

将上述代码的pwssword 和 validPwd 的初始传入的值删除后解决了此问题：将红色圈的地方删除

修改后代码如下：

<template><el-formref="editFormRef":model="userData":rules="editFormRules"><el-form-item :label="$t('table.username')"><el-input v-model="userData.login" disabled /></el-form-item><el-form-item :label="$t('table.email')" prop="email"><el-input v-model="userData.email" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.firstName')"><el-input v-model="userData.firstName" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.lastName')"><el-input v-model="userData.lastName" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.password')" prop="password"><el-input v-model="userData.password" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.validPwd')" prop="validPwd"><el-input v-model="userData.validPwd" :disabled="updateStatus" /></el-form-item><el-form-item><el-button v-if="updateStatus" type="primary" @click="changeUpdateStatus">{{ $t('table.edit') }}</el-button><el-button v-if="!updateStatus" @click="editDialogCancle">{{ $t('table.cancel') }}</el-button><el-button v-if="!updateStatus" type="primary" @click="editUserInfo">{{ $t('table.submit') }}</el-button></el-form-item></el-form>
</template><script>
import { passwordValid, emailValid, notNullValid } from '@/utils/validate'
import { updateUser, getUserByName } from '@/api/user'
export default {props: {user: {type: Object,default: () => {return {name: '',avatar: '',role: ''}}}},data() {const validatePass = (rule, value, callback) => {if (this.userData.validPwd !== this.userData.password) {callback(new Error('两次输入密码不一致!'))} else {callback()}}return {userData: {},updateStatus: true,editFormRules: {email: emailValid,password: passwordValid,validPwd: [{ validator: validatePass, trigger: 'blur' }],role: notNullValid}}},mounted() {this.getUser()},methods: {async getUser() {this.userData = await getUserByName(this.user.name)},changeUpdateStatus() {this.updateStatus = false},editDialogCancle() {this.getUser().then(() => {this.$refs.editFormRef.validate(async valid => {if (!valid) return})})this.updateStatus = true},// 修改用户信息并提交editUserInfo() {this.$refs.editFormRef.validate(async valid => {if (!valid) returnlet pwd = ''if (this.userData.password === '' || this.userData.password === undefined) {pwd = '@ad@cc@123$!@'} else {pwd = this.userData.password}delete this.userData.passworddelete this.userData.validPwdupdateUser(this.userData, pwd).then(() => {this.getUser()this.updateStatus = truethis.$message.success('Update Success')})})}}
}
</script>

el-input 输入框不能输入值，加强制输入input属性后却校验失效相关推荐

input输入框无法输入值的解决方案
IOS系统input输入框无法输入值页面上的input输入框设置-webkit-user-select:text !important;或者一并给input的父类加上此样式.(亲试有效) <i ...
input输入框限制中文汉字只能输入20个字符，英文10个字符！
iput输入框限制中文汉字只能输入10个字符,英文20个字符! 产品提了一个需求,要求输入框输入汉字的时候只能输入10个汉字英文的话只能输入20个,当时不知道怎么做,后来通过百度查找到了答案. @i ...
ios系统上input输入框无法输入值的解决办法
有好多做手机端网页开发的朋友常常遇到这种问题,就是苹果系统不能在输入框输入值只要在input 上面加上css样式-webkit-user-select:text !important 或者在父类加上这 ...
input输入框按照字符数限制输入
实现效果:按照字符数限制用户输入长度,汉字为两个字符,数字和字母为一个字符,超出字符长度限制时,自动去掉多余部分来限制用户输入. 第一种实现方式,自定义指令(update存在不及时调用的情况,放弃) ...
input输入框设置输入值
<div class="conR rowCon"><input class="inps" type="number" pl ...
html button点击后失去焦点,页面一个input输入框和一个取消按钮，input失去焦点时向后台发交易，点击取消按钮时不发交易...
html 取消 alt 静态页面批注:在点击按钮的时候之前就执行了blur事件,所以这个时候是无法把发送到后台的接口给拦截住的. 给2个不同的元素进行的绑定事件,这个时候2个事件还出现了重叠. 经过 ...
解决 input 输入框在 iOS 系统中无法输入内容
问题 input 输入框在 Android 系统可以输入和点击,但是在 iOS 系统上 input 输入框无法点击和输入. 解决方法方案一:在代码中查找并去掉下列样式 -webkit-touch-c ...
input输入框事件流程变化
从聚焦到失去焦点,以下事件会根据情况,先后判断是否会执行. onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> ...
点击底部input输入框，弹出的软键盘挡住input（苹果手机使用第三方输入法）
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤起软 ...

el-input 输入框不能输入值，加强制输入input属性后却校验失效

el-input 输入框不能输入值，加强制输入input属性后却校验失效相关推荐

最新文章

热门文章