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-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>