0

我有一个带有多种表单的标签容器。所有表单中的一些字段都有一些复杂的逻辑，我不想在每个表单上重复，所以我创建了一个用于所有表单的自定义组件。我正在尝试使用 Vuelidate 来验证我的所有表单，但是由于这些字段名称是相同的，并且当然具有相同的验证逻辑，因此 Vuelidate 验证对象在所有表单中都是相同的，这意味着，如果我填写该email字段在 formA 中，具有相同字段的所有表单也将正确验证，即使其余表单根本没有填写。

我试图将我的验证包装在一个名为表单的对象中，这似乎正确地分离了所有验证逻辑，但是，我有其他设置阻止我使用data属性，而我使用computed属性。据我所知，验证对象必须匹配我们访问字段数据的方式，例如data() { formA: { email } }匹配验证对象validations: { formA: { email } }，问题是，由于我没有使用data属性，我不知道如何映射计算属性。

这就是我所拥有的：

  export default {
    components: { PhoneField, TopNote, SubmitButton, NameFieldsGroup, EmailField },
    validations: {
      formA: {
        firstName: { required },
        lastName: { required },
        email: {
          required,
          email
        },
        phone: {
          required,
          length: minLength(10)
        }
      }
    },
    created() {
      this.$store.commit('setFormValidation', this.$v);
    },
    data() {
      return {}
    },
    computed: {
      firstName: function() {
        return this.$store.getters.formState.firstName;
      },
      lastName: function() {
        return this.$store.getters.formState.lastName;
      },
      email: function() {
        return this.$store.getters.formState.email;
      },
      phone: function() {
        return this.$store.getters.formState.phone;
      }
    }
  };

在过去的几天里，我一直在搞砸这个问题，但无法弄清楚。任何人都可以为此提出解决方案吗？

4

1 回答 1

1

弄清楚了。不知道为什么它有效，但现在有效。解决方法是mapState像这样使用 Vuex：

import { mapState } from 'vuex';

export default {
    components: { PhoneField, TopNote, SubmitButton, NameFieldsGroup, EmailField },
    validations: {
      formA: {
        firstName: { required },
        lastName: { required },
        email: {
          required,
          email
        },
        phone: {
          required,
          length: minLength(10)
        }
      }
    },
    created() {
      this.$store.commit('setFormValidation', this.$v);
    },
    data() {
      return {}
    },
    computed: {
      ...mapState(['formA']),
      firstName: function() {
        return this.$store.getters.formState.firstName;
      },
      lastName: function() {
        return this.$store.getters.formState.lastName;
      },
      email: function() {
        return this.$store.getters.formState.email;
      },
      phone: function() {
        return this.$store.getters.formState.phone;
      }
    }
  };
于 2020-01-06T20:48:35.400 回答