使用Vue 3制作一个网站的注册表。我有一个方法,获取密码和密码确认字段的值,并进行比较。如果它们是真的-什么都不会发生,否则-一个红色标 checkout 现,提交按钮被禁用。我已经在Vue 3中实现了这一点。但当密码相等时,它不工作,但有时当他们不相等时,它显示他们是。
<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>
截图:https://i.stack.imgur.com/3eOB1.pnghttps://i.stack.imgur.com/ein5h.pnghttps://i.stack.imgur.com/ein5h.png
2条答案
按热度按时间ehxuflar1#
只需将
@keydown
事件更改为@input
:6ojccjat2#
您可以在确认密码中使用@keyup或@input来代替@keydown:
或
两者都工作正常。