Implementing dynamic component rendering in Vue JS based on dropdown selection

Question

Implementing dynamic component rendering in Vue JS based on dropdown selection

I'm a beginner with Vue JS and I have a specific task in mind.

Task Description :

I need to create a dropdown with the following values.

https://i.sstatic.net/Nllw7.png

Upon selecting each value, a specific dropdown component should be added to the page. These dropdown components are predefined. For example:

Upon selecting 'Closed', a searchable dropdown component will be added.
Upon selecting 'Reviewed', another dropdown component will be added where users can select values from a list, not a searchable one.

Current Resources :

I have all the required dropdown components ready as Vue components.

Current Approach :

I have loaded all four types of dropdowns on page load and I'm toggling their visibility based on the selected dropdown value.
For instance, only the searchable dropdown component is shown when 'Closed' is selected, and the selectable dropdown component is shown when 'Reviewed' is selected.

Issue :

The new requirement is that users should be able to select any option multiple times, and each selection should add the corresponding dropdown component.
This screen should also have editing capabilities.

Additional Information :

Think of this as a filter function for the screen shown below https://i.sstatic.net/Lfn66.png

Any help or guidance would be greatly appreciated. Thank you in advance.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Start by creating the Closed and Reviewed components

https://i.sstatic.net/1ynUz.png

Next, initialize an array of filters:

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

When the Add filter button is clicked, add the corresponding component to the filters array:

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

Finally, render the filters in the template like this:

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

Check out the demo

For the And/Or dropdowns, you may need to use some tricks to implement them (you can check if the index is zero to only display them between filters)

Answer 2

Start by creating the Closed and Reviewed components

https://i.sstatic.net/1ynUz.png

Next, initialize an array of filters:

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

When the Add filter button is clicked, add the corresponding component to the filters array:

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

Finally, render the filters in the template like this:

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

Check out the demo

For the And/Or dropdowns, you may need to use some tricks to implement them (you can check if the index is zero to only display them between filters)

Implementing dynamic component rendering in Vue JS based on dropdown selection

Answer №1

Similar questions

Tips for changing the state of a toggle button with JavaScript

What is the best way to reach a link using Selenium?

Is there a specific regular expression that can be used for validating Credit Card Expiry dates in Javascript/Ang

Collapse the mobile nav bar upon clicking an item

Personalize your material-ui popover

Building a versatile memoization function in JavaScript to cater to the needs of various users

Cut off all information beyond null characters (0x00) in Internet Explorer AJAX responses

"AngularJS makes it easy for the logged-in user's information to be accessible and available across

Ensure that the nested div maintains its height consistently across all three columns

Dispatch in React Redux is not intercepted

JavaScript's innerHTML property is failing to update

Avoiding repetition in json array using reactjs with the help of axios

Encountering a Parsing error while utilizing redux: Unexpected token present

Centralized pie diagram

Is the 404 page being utilized as a fallback for AJAX requests?

Numerous ajax requests

"An issue with Angular Http Get causing Status 0 to be consistently returned when using ng

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Why is it that I cannot use the .get method on JSON data? And what is the best way to convert JSON into a map?

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone