CODEWITHSUNDEEP
vue.jsvuejs2
Nicklas Westin
Nicklas Westin

Reputation: 33

Is it possible to have dynamic element names in a Vue template?

I need to have a component, where I get the type of another component that this component should create. (it could be one of n different elements) Doing this in the component's render function is not a problem, but since I am new to Vue and I am trying to do things the Vue way, not the way I would do it in React.

I have not been able to find any solution with just using a Vue template. Is there one?

This is how I would like to be able to use the component:

<factory elm="first-component"></factory>

The factory should then internally in some way result in this:

<first-component></first-component>

(it should also be able to add attributes to the component, but that I know how to do, so a suggested solution does not need to care about attributes)

Upvotes: 3

Views: 577

Answers (1)

kissu
kissu

Reputation: 46604

There is <component :is="myCoolComponent"></component> that will basically generate <my-cool-component></my-cool-component>.
Is it what you're looking for?

From the documentation: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components

You could also totally create a Factory.vue component and put that kind of logic inside of it (<component :is="" ...>).

PS: This answer is for VueJS v2 as mentioned by OP's tags.

Upvotes: 3

Related Questions