CODEWITHSUNDEEP
vue.jscomponentsvue-props
TommyD
TommyD

Reputation: 1043

Vue Dynamic Component & Dynamic props

I have a modal component like below

<modal>
    <component
        :is="modalComponent"
    />
</modal>

And I need to pass different props to the dynamic component.

Component A needs a a title, and array of names Component B needs a a title, array of events and a date as a string.

What is the best way to pass different props to the dynamic component? I don't really want to pass all props to the dynamic components.

<modal>
    <component
        :is="modalComponent"
        :title='title'
        :names='names'
        :events='events'
        :eventDate='eventDate'
    />
</modal>

Upvotes: 2

Views: 602

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

Use a computed property to generate the props:

<component :is="modalComponent" v-bind="props"/>

computed: {
  props() {
    if (this.modalComponent === 'ComponentA') {
      return {
        title: this.title,
        names: this.names,
      }
    } else if (this.modalComponent === 'ComponentB') {
      return {
        title: this.title,
        events: this.events,
        eventDate: this.eventDate,
      }
    }
  }
}

Upvotes: 2

Related Questions