Questions & Answers

The Vuetify component v-form knows a disabled property, which is published down to child vuetify components like v-text-field, v-input etc. When the disabled property of the v-form is set to true, all child input fields are also (automatically) disabled.

But this only works for Vuetify v-input-like fields, but it seems that this does not work for own components. I want to be able to "inherit" the disabled prop in a child component (to do my own disabled UI).

I don't want to pass the reactive data prop (formDisabled in my example), as this is too tedious: There would be a large nested bunch of components that all explicitely would need the reactive data prop, which I don't want to implement: Obviously it IS working with Vuetify's own components, but how can I achieve the same by myself?

An example:

<template>
    <v-form :disabled="formDisabled">
        <!-- 
            works, even WITHOUT explicitely binding formDisabled: 
            textfield gets en-/disabled according to the form state: 
        -->
        <v-text-field />

        <!-- does NOT work: Withoud bind the formDisabled prop, 
             I cannot get the form's disabled state in my own component: -->
        <MyOwnComponent />
    </v-form>
    <v-btn @click="formDisabled = !formDisabled">Toggle</v-btn>
</template>

<script>
export default {
    data() {
        return {
            formDisabled: true
        };
    },
};
</script>

So how can I find out the form's disabled state, WITHOUT binding the formDisabled data prop explicitely to every own form child component?