Question

我有一个简单的表单，可通过3个输入（old_password，new_password和new_password_confirmation）来更新密码。

提交后，如果成功更新，则将清除输入。问题是在此之后，即使条件为false也会显示输入错误。

这是输入之一：

<input type="password" v-model="old_password">
<small class="text-danger" v-if="errors.old_password != ''">{{errors.old_password}}</small>

逻辑：

<script>
export default {
    data() {
        return {
            old_password: '',
            errors: []
        }
    },
    watch: {
        old_password(value) {
            this.old_password = value

            if(value.length < 3) {
                this.errors.old_password = 'Debes ingresar al menos 4 caracteres'
            } else {
                this.errors.old_password = ''
            }
        }
    },
    methods: {
        updatePassword() {
            this.$store.dispatch('updatePassword', data)
            .then(response => {
                this.old_password = ''
                this.errors.old_password = ''
            })
            .catch(error => {
            })
        }
    }
}
</script>

Answer 1

由于一旦输入为空，您的条件value.length < 3为真，并且将显示错误

只需将此&& value.length > 0添加到您的条件中所以最终的代码看起来像

if(value.length < 3 && value.length > 0) {
  this.errors.old_password = 'Debes ingresar al menos 4 caracteres'
} else {
  this.errors.old_password = ''
}

此外，errors应该是对象而不是数组-errors: {}

使用Vue进行cleannig输入后显示错误消息

1 个答案: