Validate Multi-dimensional Error Response In Vue

I have a complex form built in Vue 2+ with a Laravel 5.5 backend. The app uses a complete Vuex store for actions, mutations, getters and state.

I use axios interceptors to capture the errors and store them in Vuex, then map them as computed properties within the component/form.

Up until now I've had all single dimension errors coming back from Laravel form requests, but now I need to validate a multi-dimensional error response, and of course since the nested keys don't exist in the validation state, it throws an error and crashes the app.

My Vuex validation state:

export default {
    validation: [],
}

My form request rules for the array piece:

'payload'                    => 'required|array',
'payload.bio.category'       => 'required_if:condition_id,1',
'payload.bio.identifier'     => 'required_if:condition_id,1',
// more here

Then in my form inside the component we check for the validation:

<div class="form-group required col-md-12" 
    :class="{ 'has-error': validation.payload.bio.category }">
    <!-- inputs here -->
</div>

When the select menu is activated to select the condition_id then I receive the following error:

[Vue warn]: Error in render: "TypeError: Cannot read property 'bio' of undefined"

How can I resolve this so that I can validate these arrays in Vue?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2Awbnba
via IFTTT