在网上查找说是加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-form
ref="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) return
let pwd = ''
if (this.userData.password === '' || this.userData.password === undefined) {
pwd = '@ad@cc@123$!@'
} else {
pwd = this.userData.password
}
delete this.userData.password
delete this.userData.validPwd
updateUser(this.userData, pwd).then(() => {
this.getUser()
this.updateStatus = true
this.$message.success('Update Success')
})
})
}
}
}
</script>
将上述代码的pwssword 和 validPwd 的初始传入的值删除后解决了此问题:将红色圈的地方删除
修改后代码如下:
<template>
<el-form
ref="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) return
let pwd = ''
if (this.userData.password === '' || this.userData.password === undefined) {
pwd = '@ad@cc@123$!@'
} else {
pwd = this.userData.password
}
delete this.userData.password
delete this.userData.validPwd
updateUser(this.userData, pwd).then(() => {
this.getUser()
this.updateStatus = true
this.$message.success('Update Success')
})
})
}
}
}
</script>