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工作方式相同，因此您可以将其保留为 value。