Creating a registration form for a website using Vue 3. I have a method that checks the values of the password and confirm password fields and compares them. If they match, nothing happens. However, if they do not match, a red label appears, and the submit button is disabled. Although I have implemented this in Vue 3, there seems to be an issue where it sometimes displays that passwords are different even when they are the same.
<template>
<div>
<label for="password">Password</label>
<input type="text" v-model="password" name="password" id="password" placeholder="••••••••" required="">
</div>
<div>
<label for="confirm-password">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">Passwords do not match</label>
</div>
<button :disabled="submitDisabled" type="submit">Create Account</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.sstatic.net/3eOB1.png https://i.sstatic.net/ein5h.png https://i.sstatic.net/ein5h.png