Как сопоставить вложенный объект проверки Vuelidate с вычисленными свойствами в VueJS? - PullRequest
Новая
       7

Как сопоставить вложенный объект проверки Vuelidate с вычисленными свойствами в VueJS?

0 голосов
/ 06 января 2020

У меня есть контейнер вкладок с несколькими формами. Некоторые поля во всех формах имеют сложные логики c, которые я не хотел повторять в каждой форме, поэтому я создал специальный компонент, который используется во всех формах. Я пытаюсь использовать Vuelidate для проверки всех моих форм, но поскольку имена этих полей одинаковы и, конечно, имеют одинаковые логи проверки c, объект проверки Vuelidate одинаков во всех формах, то есть если я заполняю в поле email в formA тогда все формы с тем же полем также будут корректно проверяться, даже если остальные формы не были заполнены вообще.

Я пытался обернуть свои проверки внутри объект, названный как формы, и это, кажется, правильно разделяет все логи проверки c, но у меня есть другие настройки, которые мешают мне использовать 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;
      }
    }
  };

Я возился с этим последние несколько дней, но не могу понять , Кто-нибудь может предложить решение для этого?

1 Ответ

0 голосов
/ 06 января 2020

Разобрался. Не уверен, почему это работает, но сейчас. Исправление заключается в использовании Vuex's mapState следующим образом: 

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;
      }
    }
  };
...