Vue JS - 基于下拉选择添加动态组件

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.

Answer 1

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)