I am currently trying Nuxt.js with Vuex. And I Built a simple form, where I have an email field, a password field and a button.
All my state, mutations and actions are working as they should be. But When I created a computed property just to validate the password, I always have an error with an if statement to validate length of the password.
My Vuex state looks like this:
export default () => ({
// Register Init States
registerEmail: null,
registerPassword: null,
})
My mutation:
export default {
setRegisterEmail(state, registerEmail) {
state.registerEmail = registerEmail
},
setRegisterPassword(state, registerPassword) {
state.registerPassword = registerPassword
},
}
My template:
<vs-input
:value="registerPassword"
label="Password"
primary
type="password"
:progress="getProgress"
:visible-password="hasVisiblePassword"
icon-after
@input="setRegisterPassword"
@click-icon="hasVisiblePassword = !hasVisiblePassword"
>
<template #icon>
<i v-if="!hasVisiblePassword" class="bx bx-show-alt"></i>
<i v-else class="bx bx-hide"></i>
</template>
<template v-if="getProgress == 100" #message-success
>Secure password</template
>
</vs-input>
My Computed property:
getProgress() {
let progress = 0
// at least one number
if (/\d/.test(this.$store.state.auth.registerPassword)) {
progress += 30
}
// at least one capital letter
if (/(.*[A-Z].*)/.test(this.$store.state.auth.registerPassword)) {
progress += 20
}
// at least a lowercase
if (/(.*[a-z].*)/.test(this.$store.state.auth.registerPassword)) {
progress += 25
}
// more than 8 digits
if (this.$store.state.auth.registerPassword === null) {
progress += 0
} else if (this.$store.state.auth.registerPassword.length >= 8) {
progress += 25
}
return progress
},
So because the password init state is null, there should be no progress, but as I type the password, it should to the else if and verify the number of chars.
But when I type the password, the input and my state only keeps the last letter I typed.
Imagine that I typed "overflow", my state password would only have "w". And if I remove the password validation length, my state looks like this "overflow".
Am I doing something wrong? I hope I was clear 🥺 Because I am so confused right now. 😩
The problem is being caused when you call setRegisterPassword
in the template. That input event is only returning the last input character. You can add a handler to update that value properly. One option is to use a local data property as a v-model
binding and then setRegisterPassword
to that value in the input handler.
<vs-input
v-model="localPassword"
label="Password"
primary
type="password"
:progress="getProgress"
:visible-password="hasVisiblePassword"
icon-after
@input="handleRegisterPassword"
@click-icon="hasVisiblePassword = !hasVisiblePassword"
>
and in your
data(){
return {
localPassword:''
}
},
methods: {
handleRegisterPassword() {
this.setRegisterPassword(this.localPassword);
}
}
Note: I sam not familiar with vs-input
so your :value
may work the same as v-model
so you may be able to leave that as value.