我正在为一个Vue前端应用程序工作,该应用程序要求所有表单数据在提交到后端之前都在本地保留,以防网络连接问题导致服务中断。我正在使用Vuex来维护整个应用程序中的所有表单数据,以便可以将其持久保存并根据需要从本地存储还原。
第二个要求是表单验证,我打算为此使用Vuelidate库。该文档建议使用不带v-model的Vuelidate,所需的只是事件函数中的this.$v.touch()。这是我尝试过的方法,但似乎没有用。
请参阅以下示例:

<template>
  <form>
    <input name="full-name" v-model="fullName" placeholder="Full Name" />
  </form>
</template>

<script>
  export default {
    name: "AForm"
    computed: {
      fullName: {
        get() { return this.$store.state.fullName }
        set(name) {
          this.$v.touch();
          this.$store.dispatch("updateFullName", name);
        },
      }
    },
    validations: {
      fullName: minLength(4);
    }
  }
</script>
当我检查$v.fullName时,该值等于true。当我查看整个$v对象时,我看到了$anyDirty: false
Codesandbox

最佳答案

验证配置格式错误
验证配置应为:

export default {
  /**
   * Validation Config Format:
   *
   *   validations: {
   *     PROP_NAME: {
   *       RULE_NAME: RULE
   *     }
   *   }
   */
  validations: {
    //fullName: minLength(4), // DON'T DO THIS

    fullName: {
      minLength: minLength(4)
    }
  },
}
$touch看起来您使用了this.$v.touch(),但是应该是this.$v.$touch()。但是,由于计算出的 Prop 仅设置了一个 Prop ,因此在通过Vuex Action 更改 Prop 后,您只需在该 Prop 上调用$touch()(即$v.PROP_NAME.$touch())。
export default {
  computed: {
    fullName: {
      get() {
        return this.$store.state.fullName;
      },
      set(name) {
        //this.$v.touch() // DON'T DO THIS

        this.$store.dispatch('updateFullName', name)
        this.$v.fullName.$touch()
      }
    }
  }
}
javascript - 正确使用Vuex和Vuelidation的正确方法-LMLPHP

08-28 14:51
查看更多