Making a registration form for a website using Vue 3. I have a method, that gets values of password and password confirmation fields and compares it. If they're true - nothing happens, else - a red label appears and submit button gets disabled. I have implemented this in vue 3. but when passwords are equal, it dont works, but sometimes when they are not, it displays that they are.

<template>
    <div>
        <label for="password">Пароль</label>
        <input type="text" v-model="password" name="password" id="password" placeholder="••••••••" required="">
    </div>
    <div>
        <label for="confirm-password">Подтвердите Пароль</label>
        <input @keydown="confirmPassword" type="confirm-password" v-model="confirm" name="confirm-password" id="confirm-password" placeholder="••••••••" required="">
        <label for="confirm-password" v-if="invalidPasswords">Пароли не совпадают</label>
    </div>
    <button :disabled="submitDisabled" type="submit">Создать аккаунт</button>
</template>

<script>
    export default {
        name: "RegistrationView",
            data () {
              return {
                ...
                password: '',
                confirm: '',
                invalidPasswords: false,
                submitDisabled: false,
              }
          },
          methods: {
            confirmPassword() {
              if (this.password !== this.confirm){
                this.invalidPasswords = true
                this.submitDisabled = true
              } else {
                this.invalidPasswords = false
                this.submitDisabled = false
              }
            },
        },
    }
</script>

Screenshots: https://i.stack.imgur.com/3eOB1.png https://i.stack.imgur.com/ein5h.png https://i.stack.imgur.com/ein5h.png

CodePudding user response：

Just change @keydown event to @input :

 <input @input="confirmPassword" type="confirm-password" v-model="confirm" name="confirm-password" id="confirm-password" placeholder="••••••••" required="">
    

CodePudding user response：

You can use @keyup or @input instead of @keydown in your confirm password:

<input @keyup="confirmPassword" type="confirm-password" v-model="confirm" name="confirm-password" id="confirm-password" placeholder="••••••••" required="">

OR

 <input @input="confirmPassword" type="confirm-password" v-model="confirm" name="confirm-password" id="confirm-password" placeholder="••••••••" required="">

Both work fine.