Validation state of overall form about vuelidate

[furey]

@Doogiemuc

The root $v object contains $invalid, $dirty and $error values, just like all the keys inside of it:

{
    "example-data-key": {
        "required": true,
        "$invalid": true,
        "$dirty": true,
        "$error": true
    },
    "$invalid": true,
    "$dirty": true,
    "$error": true
}

For your save button, you could simply bind the disabled attribute like so:

<button :disabled="$v.$invalid">Save</button

Like @mubaidr mentioned, you could also use validation groups if your logic depends on specific fields being valid before enabling.

Cheers.

[mubaidr]

You have to use validation groups for that purpose. I have done exactly same functionality in my project, please have a look at this: https://github.com/mubaidr/SPA-asp.net-api-vuejs-/tree/master/MBO

(check signup component)