Nuxt + Vuex + 计算属性

Question

我目前正在尝试使用 Vuex 的 Nuxt.js。我构建了一个简单的表单，其中有一个电子邮件字段、一个密码字段和一个按钮。

我所有的状态、突变和动作都在正常工作。但是当我创建一个计算属性只是为了验证密码时，我总是在使用 if 语句来验证密码长度时出错。

我的 Vuex 状态如下所示：

export default () => ({
// Register Init States
  registerEmail: null,
  registerPassword: null,
})

我的突变：

export default {
  setRegisterEmail(state, registerEmail) {
    state.registerEmail = registerEmail
  },
  setRegisterPassword(state, registerPassword) {
    state.registerPassword = registerPassword
  },
}

我的模板：

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

我的计算属性：

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
    },

所以因为密码初始化状态为空，应该没有进度，但是当我输入密码时，它应该到else if并验证字符数。

但是当我输入密码时，输入和我的状态只保留我输入的最后一个字母。

假设我输入了“溢出”，我的状态密码只有“w”。如果我删除密码验证长度，我的状态看起来像这样“溢出”。

我做错了吗？我希望我是清楚的？？？？因为我现在很迷茫。 ????

Answer 1

当您在模板中调用setRegisterPassword 时会导致该问题。该输入事件仅返回最后一个输入字符。您可以添加一个处理程序来正确更新该值。一种选择是将本地数据属性用作v-model 绑定，然后将setRegisterPassword 用于输入处理程序中的该值。

            <vs-input
              v-model="localPassword"
              label="Password"
              primary
              type="password"
              :progress="getProgress"
              :visible-password="hasVisiblePassword"
              icon-after
              @input="handleRegisterPassword"
              @click-icon="hasVisiblePassword = !hasVisiblePassword"
            >

在你的

data(){
 return {
   localPassword:''
 }
},
methods: {
  handleRegisterPassword() {
    this.setRegisterPassword(this.localPassword);
  }
}

注意：我对 vs-input 不熟悉，所以您的 :value 可能与 v-model 的工作方式相同，因此您可以将其保留为值。