[Vuejs]-Value update on the same tick Vue.js

by

0👍

I would probably set that as a computed value so that it is updated every time the password is updated. Maybe something like below would work better for you?

new Vue({
  data: {
        password: ""
  },
  computed: {
        hasLower: function() {
            return this.password && /[a-z]/.test(this.password);
        },
        hasUpper: function() {
          return this.password && /[A-Z]/.test(this.password);
        },
        hasDigit: function() {
          return this.password && /[0-9]/.test(this.password);
        },
        hasSChar: function() {
          return false; // User yours here. I don't know the regex off the tope of my head.
        },
        has8: function() {
          return this.password && this.password.length >= 8;
        },
        password_strength: function() {
            var points = 0;
            if (this.hasLower) points++;
            if (this.hasUpper) points++;
            if (this.hasDigit) points++;
            if (this.hasSChar) points++;
            if (this.has8) points++;
            return points;
        }
    }
});

EDIT: Just realized the original post does not have () at the end of those, so I added them. They may well be properties in your code, so no parentheses makes sense that way. I just made them methods.

EDIT2: I take that back, they’ll probably be better off as computed properties. Taking a second look, it looks like I’ve got something very similar to what you have, but as far as I can tell, the password strength is calculated correctly on my end. When the password hits the appropriate checks, the password strength variable is updated appropriately.

Leave a comment