Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create dynamic tag based on props with Vue 2

How can I make a component similar to vue-router router-link where I get the tag via props to render my template ?

<my-component tag="ul"> </my-component> 

Would render:

<ul>   anything inside my-component </ul> 
like image 494
Cassio Cabral Avatar asked Jan 19 '17 18:01

Cassio Cabral


People also ask

How do you pass Props dynamically?

To pass props dynamically to dynamic component in Vue. js, we can use the v-bind directive. in the template to pass all the properties in the currentProperties as props to the dynamic component component. We set the component to load by setting the is prop to the currentComponent` component name string.

How do you pass props in Vue 2?

To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.

Can I pass function as props Vue?

You can pass strings, arrays, numbers, and objects as props. But can you pass a function as a prop? While you can pass a function as a prop, this is almost always a bad idea. Instead, there is probably a feature of Vue that is designed exactly to solve your problem.

Are Props reactive Vuejs?

Props and data are both reactiveWith Vue you don't need to think all that much about when the component will update itself and render new changes to the screen. This is because Vue is reactive. Instead of calling setState every time you want to change something, you just change the thing!


1 Answers

You can use a built-in component element like so:

<component is="ul" class="foo" style="color:red">   anything inside component </component> 

See: https://vuejs.org/v2/guide/components.html#Dynamic-Components

like image 56
krukid Avatar answered Sep 28 '22 01:09

krukid