Question

我的Vue.JS表单上有一个密码字段，该字段应更新进度条，该策略非常简单，我有5个条件，每个条件都应向进度条添加20％。我所做的是对每个看起来像这样的条件进行5次computed检查：

hasLower() {
  return this.password == null
    ? null
    : /[a-z]/.test(this.password);
}

然后我在keyPress处触发一个函数，以计算我从5次检查中得到的真实数，并更新随后映射到进度条的计数器的值，如下所示：

    checkPassword() {
  this.trueCounter = 0;
  this.progressBar.value = 0;
  if (this.hasLower) this.trueCounter++;
  if (this.hasUpper) this.trueCounter++;
  if (this.hasDigit) this.trueCounter++;
  if (this.hasSChar) this.trueCounter++;
  if (this.has8) this.trueCounter++;
  console.log("Probe: " + this.trueCounter)
}

我的问题是，通过以下按键更新值！例如，如果在密码字段中键入“ a”，则得到0，如果再次键入，则得到1，并保持这种状态。那么，例如，如果我键入一个触发不同条件“ A”的字符，则我会再次获得最后一个值，并且只有通过以下按键操作才能更改它。

是否有一种方法可以克服这一按键延迟，所以我始终可以立即获得更新的值？

Answer 1

我可能会将其设置为计算值，以便每次更新密码时都会对其进行更新。也许像下面这样对您更有效？

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;
        }
    }
});

编辑：刚意识到原始帖子的末尾没有()，所以我添加了它们。它们很可能是您代码中的属性，因此没有括号是那样的。我只是给他们做方法。

EDIT2：我回想一下，作为计算属性，它们可能会更好。再看一看，看来我有一些与您所拥有的非常相似的东西，但是据我所知，密码强度是在我这一端正确计算的。密码经过适当的检查后，密码强度变量将适当更新。

在同一刻度上更新值Vue.js

1 个答案: