[Vuejs]-How to get component state within child within slot Vue

by

0👍

I´ve did some changes to your provided code, you can watch the changes in this codesandbox. What I did was to let your InputFields to emit something like a unique id, First Names unique id is like firstname in my example, and also their status of validation. The function is called checkValidation and the emit is addded to their implementation with @check-validation="checkValidation".

There is a new object, which handles multiple status of validation. You can create it dynamically in the future, if you want to make this attemp generic. The object is:

const formValidationObject = reactive({
   firstname: false,
   lastname: false
});

The checkValidation looks like this:

const checkValidation = (object) => {
   formValidationObject[object.data.id] = object.data.valid === true;
};

It´s a simple thing. The object passed with the emit contains the id, like "firstname", and the status of validation. The formValidationObject with it´s key will be true if object.data.valid is true, if not, it´s false.

Now you could do something like passing this as a prop to your Form.vue and handle, if anything isn´t validated.

Leave a comment