Nuxt + Vuex + Computed Property

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. 😩

Answer

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.