How would I fill the component (Vuetify component) type dynamically in Vue js?

Question

My actual code:

    <component :is="type === 'v-text-field'">
      <v-text-field v-bind="props" />
    </component>
    <component :is="type === 'v-autocomplete'">
      <v-autocomplete v-bind="props" />
    </component>

I would like to be more cleaner, like this:

<:type v-bind="props" />

I know my code above is wrong, but I would like to replace that type with a vuetify component.

Gaetan C. · Accepted Answer · 2022-09-30 11:56:12Z

2

In the Vue.js dynamic components documentation, the special is attribute can container either:

the name string of a registered component, OR
the actual imported component object

But you are providing it with a boolean instead.

As far as I understand, this line should be enough:

<component :is="type" v-bind="props">

edited Sep 30, 2022 at 11:56

answered Sep 30, 2022 at 11:48

Gaetan C.

1,91416 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carlos Sá Over a year ago

I just noticed I'm being redundant, because I'm trying to clean my code, creating more code. lol...

Collectives™ on Stack Overflow

How would I fill the component (Vuetify component) type dynamically in Vue js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related