Vuelidate: Can't get Vuelidate working with Vuex and child components

[andrefigueira]

Hi there,

I'm working on a project that uses Vuex to maintain state, with a parent and a couple of child components.

In each child component I define computed properties with getters and setters, whilst also providing the prop for $v, my validations are stored in the parent component and bound using the v-bind:$v="$v" directive e.g.

in my parent component I have a method which checks if the validations have passed, the values however and getters/setters live in the children components.

// Parent component
validations: {
      recipientsName: {
        required
      },
      recipientsSenderName: {
        required
      },
      emailFormEmail: {
        required,
        email
      }
    }

// Child component 1
props: [
    "$v"
],
computed: {
      recipientsName: {
        get () {
          return this.$store.state.basketDelivery.recipient.name;
        },
        set (value) {
          this.$store.commit('updateRecipientName', value);
          this.$v.recipientsName.$touch();
        }
      },

<b-form-group id="recipientsNameGroup"
                      label="Recipient's Name *"
                      label-for="recipientsName">
            <b-form-input id="recipientsName"
                          type="text"
                          v-model="recipientsName"
                          :state="$v.recipientsName.$error ? false : null"
                          required
                          placeholder="Enter the name of the recipient">
            </b-form-input>

            <b-form-invalid-feedback>Please enter your name</b-form-invalid-feedback>
        </b-form-group>

My issue is that, in doing this, it seems that the state of the validation never changes, I've tried moving the computed properties for vuex to the parent, and pass them down as props, but this causes a Vuex error, stating that mutations should not be done directly. Is there any recomendation how I can get this working?

to summarise, I have a parent component in which I want to validate the validation for forms defined across a couple of sub components, which store their state in Vuex.

Thank you for your time, let me know if you require any further information.

[space87]

Any updates or findings on this we have the same issue

[mu4ddi3]

As i understand, because the getters are in children components, the "recipientsName" , "recipientsSenderName", "emailForEmail" elements are not available in parent component by "this.recipientsName" etc.

Try to add a computed to obtain a state in parent like this:

state() {
    return this.$store.state;
}

and now modify your validations to be nested inside state key like this:

validations: {
    state: {
        recipientsName: {
            required
          },
          recipientsSenderName: {
            required
          },
          emailFormEmail: {
            required,
            email
          }
    }
}

Pass the $v object through props normally and now in your child components you can check errors using

v.state.recipientsName.$error

or touch something in an action by

this.v.state.recipientsName.$touch();

You could now see the validation changes from parent perspective.

[kevintighe]

This tripped me up as well, and the answer above from @mu4ddi3 was the solution.

To state it another way, the parent (where the validations are defined) must have a computed/data element that matches the path of the field in the validations.