'Same props for multiple Vue components

I'm creating dynamic forms (something like xforms) with some kind of atomic design. It means that every field will be a different component. Like FormTextArea, FormTextField, FormNumberField. Right now I have a lot of duplicated code like below:

 <v-text-field
    v-model="currentValue"
    hide-details
    dense
    persistent-placeholder
    :filled="field.readonly"
    outlined
    :rules="field.required ? [rules.required] : []"
    :readonly="field.readonly"
    :disabled="field.readonly"
    :placeholder="field.label +'...'"
 ></v-text-field>

Basically FormNumberField has same props as FormTextField with but there is only different type. FormTextArea has different Vuetify component inside, but most of the props are the same. Is there any good approach for that? I want to change prop in one place so it affects all of them.

vue.jsvuejs2vuetify.js


Solution 1:[1]

I think v-bind="$attrs" should solve your problem. You can set default `props' in your "core" component. Then, just override what you want

See the docs https://v3.vuejs.org/guide/component-attrs.html#disabling-attribute-inheritance

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ?ukasz Socha

Related Questions