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

What is the most effective way to dynamically incorporate external input into a SlimerJS script?

Discovering the potential of utilizing an array transmitted by Node/Express on the server-side and integrating it into Google Maps on the client-side

Ways to verify the element prior to the completion of the request?

angular ensuring seamless synchronization of objects across the application

Basic HTML Audio Player Featuring Several Customizable Variables

The Like and increment buttons seem to be unresponsive when placed within a FlatList component

What is the best way to send information from child components to their parent in React

Automatically populate form fields with data from the clicked row in the HTML table when using JSP

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Analyzing the HTTP status codes of various websites

Scrolling Container Following Down the Page, Halts at Its Own Bottom (Similar to Twitter)

Unable to render properly after saving to Firebase

Storing ajax data into a variable seems to be a challenge for me

Issue: "A further loader may be required to manage the output produced by these loaders."

Accessing JS code from HTML is not possible in React

Guide on storing images in a designated folder using CodeIgniter

Can we dynamically add an identical DOM structure by clicking a button using jQuery?

How can I implement two dropdowns in jquery?

The comparison between importing TypeScript and ES2015 modules

How to change the image source using jQuery when hovering over a div and set its class to active?