Currently exploring Nuxt.js with Vuex, I have created a basic form containing an email field, a password field, and a button.
All my state, mutations, and actions are functioning correctly. However, I encountered an issue when trying to create a computed property to validate the password length using an if statement.
Here is a glimpse of my Vuex state:
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
},
}
For the template section:
<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>
The computed property for validating the password:
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 characters
if (this.$store.state.auth.registerPassword === null) {
progress += 0
} else if (this.$store.state.auth.registerPassword.length >= 8) {
progress += 25
}
return progress
},
Despite setting the password initial state as null, the input field seems to only retain the last character typed rather than the entire string entered.
For instance, typing "overflow" would result in my state password storing just the letter "w". Removing the password length validation allows the state to capture the complete word "overflow."
Wondering what might be causing this issue. Any insights or suggestions would be greatly appreciated! 🥺 Feeling quite perplexed at the moment. 😩