menu

Questions & Answers

VuetifyJS: Access v-form disabled state in child components

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?

Comments:
2023-01-19 23:20:05
Looks like Vuetify componets have the value injected from the v-form, so you could do the same in your component, I think it is const {isDisabled} = inject('vuetify:form'). Maybe it is also possible to import the injection function: const {isDisabled} = useForm() from composables/form.ts. Not sure if this is easier than just setting the prop though.
Answers(0) :