如何使用 vue-multiselect 進行動態多個下拉菜單

Question

嗨，我不知道通過更改數據和自動加載特定組件的 vue 是否可以實現我想要實現的目標

以下是我的期望（在 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>

從上面的代碼片段中，您可以通過選擇country -> india -> Bengaluru或country -> usa -> Silicon Valley來觀察到這一點

我想用vue-multiselect復制同樣的東西

以下是我在 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/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/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>

Answer 1

您可以根據multiselects有條件地呈現input或多category.name 。

例如，當category.name為Money時，顯示<input> ：

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

否則，當它是Country時，顯示兩個multiselect （一個用於國家選擇，另一個用於區域）：

<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>

國家多選由multiselect countryOptions[]填充（如下所示），每個選項都有regions[] ，用於填充區域multiselect 。 這可確保顯示的區域僅適用於所選國家/地區。

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'],
        }
      ],
    }
  },
})

演示

Answer 2

您是否嘗試根據從下拉列表中選擇的選項有條件地呈現組件？

如果是這樣，為什么不使用 v-if - 請參閱文檔https://v2.vuejs.org/v2/guide/conditional.html中如何有條件地渲染組件

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