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

因此，因为密码init state为null，所以不应该有任何进展，但是当我输入密码时，它应该返回else if并验证字符数。

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

假设我输入"overflow"，我的州密码将只有"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。