Vue JS - Add dynamic component based on dropdown selection

user_1222412 0
Viewed 731

I am new to Vue JS and I have below requirement

Requirement :

I have dropdown with below values

enter image description here

On selection of each value, I want to add dropdown component on page, which are already defined. For example:

  • On Selection of 'Closed', dropdown component (which is searchable dropdown)will be added
  • On Selection of 'Reviewed', another dropdown component where user can select values from dropdown. (not searchable one). Likewise..

What I have :

  • I already have all the different types of dropdowns as a component.

What I tried :

  • I have loaded all the four types of dropdown on page load, and I am hiding and showing them based on dropdown value selection.
  • Example: I am showing only searchable dropdown component when user select 'Closed' option and hiding other components. I am showing selectable dropdown component when user select 'Reviewed' option and hiding other components.

Problem :

  • Now the requirement is, user can select any option N number of times and on each selection, respective dropdown component should get added.
  • This screen also have edit functionality.

Note :

  • Consider this as a filter functionality with below screen enter image description here

Any help / pointers would be appreciated. Thanks in advance.

vuejs2 vue-component vue.js javascript
1 Answers

First you should create Closed and Reviewed components

enter image description

Then, you should have a array of filters:

data() { return {
  filters: [],
} }

When Add filter is clicked you should push corresponding component to filters, something like:

methods: {
  addFilter() {
    const component = Created /* */;
    this.filters.push({
      value: null,
      component: component
    })
  }
}

And finally render them in template this way:

<div v-for="(filter, index) in filters" :key="index">
  <component :is="filter.component" />
</div>

Demo

For And/Or dropdowns, you can use some hacks but I'm not sure how to implement them (you can check if index is zero to only display them between filters)

user_134497120
Related