Vue JS - Add dynamic component based on dropdown selection

Question

I am new to Vue JS and I have below requirement

Requirement :

I have dropdown with below values

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

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

Drdilyor · Accepted Answer · 2021-04-19 15:13:37Z

4

First you should create Closed and Reviewed components

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)

answered Apr 19, 2021 at 15:13

Drdilyor

1,4162 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue JS - Add dynamic component based on dropdown selection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related