Ways to create interactive multiple dropdown menu using vue-multiselect

Question

Ways to create interactive multiple dropdown menu using vue-multiselect

I'm not sure if it's possible to achieve what I want with Vue for a specific component by changing its data and automatically loading it.

Below is my expectation (tried in jQuery)

var data = {country:{type:'dropdown',values:['india','usa']},money:{type:'input',placeholder:'enter amount'},india:['Bengaluru'],usa:['Silicon Valley']}

function getDropTemplate(dropDownList){
    var dropDownStr = '';
    for(var i = 0; i < dropDownList.length; i++){
       dropDownStr += `<option value="${dropDownList[i]}">${dropDownList[i]}</option>`
    }
   return `<select class="mainCountry">${dropDownStr}</select>`;
}

function getInputTemplate(inputObj){
   return `<input type="text" placeholder="${inputObj.placeholder}"/>`
}


$(function(){
    
   $('#dropdown').on('change',function(){
      var value = $(this).val(), template = '';
      if(data[value].type == 'dropdown'){
           template += getDropTemplate(data[value].values)
      }else{
          template += getInputTemplate(data[value])
      }

      $('#selectedResults').html(template);
   });

   $(document).on('change','.mainCountry',function(){
      var result = data[$(this).val()]
      $('#subResults').html(getDropTemplate(result));
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="dropdown">
   <option value="">--select--</option>
   <option value="money">Money</option>
   <option value="country">Country</option>
</select>

<div id="selectedResults">

</div>

<div id="subResults">

</div>

From the snippet above, you can see that by selecting

country -> india -> Bengaluru

or

country -> usa -> Silicon Valley

.

I want to replicate the same thing with vue-multiselect

Below is what I have tried in Vue

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      value: [],
       //data:{country:{type:'dropdown',values:['india','usa']},money:{type:'input',placeholder:'enter amount'},india:['Bengaluru'],usa:['Silicon Valley']}

       options:[{name:'money'},{name:'country'}]
    }
  }
})

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aadcdfcf87c7dfc6dec3d9cfc6cfc9deea98849b849a">[email protected]</a>"></script>
  <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285e5d4d05455d445c415b4d444d4b5c681a06190618">[email protected]</a>/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  
  


<div id="app">

     <multiselect
    v-model="value"
     track-by="name"
    :options="options"
    label="name"
     :multiple="false"
    :taggable="false"
  ></multiselect>
  

</div>

javascript vue.js vuejs3 vue-multiselect

Answer 1

Answer №1

To display the interactive elements like input or multiselects, you can use conditional rendering based on the category.name.

For example, if the category.name is identified as Money, then show the text input field:

<template v-if="category && category.name === 'Money'">
  <input type="text" v-model="moneyAmount" placeholder="Enter amount">
</template>

Alternatively, when the category.name is Country, render two multiselect components (one for selecting the country and the other for region selection):

<template v-else-if="category && category.name === 'Country'">
  <multiselect
               placeholder="Select a country"
               v-model="country"
               track-by="name"
               :options="countryOptions"
               label="name"
               :multiple="false"
               :taggable="false">
  </multiselect>

  <multiselect v-if="country && country.regions"
               placeholder="Select a region"
               v-model="region"
               :options="country.regions"
               :multiple="false"
               :taggable="false">
  </multiselect>
</template>

The country selection in the multiselect dropdown is populated with options from the countryOptions[]. Each country option includes an array of regions (regions[]) to accurately display region options relevant to the selected country.

new Vue({
  data() {
    return {
      category: null,
      country: null,
      region: null,
      moneyAmount: null,
      categoryOptions: [{ name: 'Money' }, { name: 'Country' }],
      countryOptions: [
        {
          name: 'USA',
          regions: ['Silicon Valley', 'Midwest'],
        },
        {
          name: 'India',
          regions: ['Bengaluru'],
        }
      ],
    }
  },
})

Check out the demo here!

Answer 2

To display the interactive elements like input or multiselects, you can use conditional rendering based on the category.name.

For example, if the category.name is identified as Money, then show the text input field:

<template v-if="category && category.name === 'Money'">
  <input type="text" v-model="moneyAmount" placeholder="Enter amount">
</template>

Alternatively, when the category.name is Country, render two multiselect components (one for selecting the country and the other for region selection):

<template v-else-if="category && category.name === 'Country'">
  <multiselect
               placeholder="Select a country"
               v-model="country"
               track-by="name"
               :options="countryOptions"
               label="name"
               :multiple="false"
               :taggable="false">
  </multiselect>

  <multiselect v-if="country && country.regions"
               placeholder="Select a region"
               v-model="region"
               :options="country.regions"
               :multiple="false"
               :taggable="false">
  </multiselect>
</template>

The country selection in the multiselect dropdown is populated with options from the countryOptions[]. Each country option includes an array of regions (regions[]) to accurately display region options relevant to the selected country.

new Vue({
  data() {
    return {
      category: null,
      country: null,
      region: null,
      moneyAmount: null,
      categoryOptions: [{ name: 'Money' }, { name: 'Country' }],
      countryOptions: [
        {
          name: 'USA',
          regions: ['Silicon Valley', 'Midwest'],
        },
        {
          name: 'India',
          regions: ['Bengaluru'],
        }
      ],
    }
  },
})

Check out the demo here!

Answer 3

Answer №2

Would you like to display a particular component based on the option chosen from the dropdown menu?

If yes, consider utilizing a v-if directive - learn more about conditional rendering in the documentation https://v2.vuejs.org/v2/guide/conditional.html

<template v-if="country.value === 'usa'">
    // show input for USA
</template>
<template v-else-if="country.value === 'india'">
    // show input for India
</template>

Answer 4

Would you like to display a particular component based on the option chosen from the dropdown menu?

If yes, consider utilizing a v-if directive - learn more about conditional rendering in the documentation https://v2.vuejs.org/v2/guide/conditional.html

<template v-if="country.value === 'usa'">
    // show input for USA
</template>
<template v-else-if="country.value === 'india'">
    // show input for India
</template>

Ways to create interactive multiple dropdown menu using vue-multiselect

Answer №1

Answer №2

Similar questions

Converting URL-esque information to JSON using JavaScript

Troubleshooting problems with Window.postMessage()

Run a series of promises in an array one after the other without relying on async and await

React & Material UI: Unleashing the Power of Chained Arrow Functions

Link Google Map Marker Click Event with Dynamic Binding

Grouping items by a key in Vue and creating a chart to visualize similarities among those keys

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

Utilizing data compression techniques to minimize network bandwidth consumption

Using scrollIntoView() in combination with Angular Material's Mat-Menu-Item does not produce the desired result

Encountering NaN while trying to retrieve the duration in JavaScript

What is the best way to obtain the current cursor location in draft.js?

JavaScript design not aligning

Creating elements in Polymer 2.0 is a breeze. Simply use the `createElement` method, then seamlessly import it using `Polymer

Tips for positioning the overlay to match the icon list when hovering- JavaScript/Cascading Style Sheets (CSS)

Is there a way to transfer the chosen maximum and minimum price values to a JavaScript function within a select tag in HTML?

`AngularJS Integration in Liferay`

Refining to Showcase One Menu Selection

Verifying the invocation of a callback function through the use of $rootScope.$broadcast and $scope.$on

When I use my loop to generate Google Map markers, the positioning is not accurate and the markers do not appear on the map. However, manually inputting the positions