I have a select inside the component. Depending on the value of the select, another component is rendered in the component.
How to pass props to a dynamic component if I render the component like this:
<component :is="valueSelect"></component>
or how to render a dynamic component with parameter passing
You can pass props to the dynamic component by v-bind with an object with each prop key and value
Ex:
<component :is="valueSelect" v-bind="componentProps"></component>
data: function () {
return {
valueSelect: 'firstComponent',
}
},
computed: {
componentProps: function() {
if (this.valueSelect === 'firstComponent') {
return { firstProp: 'one' }
} else if (this.valueSelect === 'secondComponent') {
return { secondProp: 'two' }
}
}