如何使用vue multiselect创建动态多下拉列表

q9yhzks0  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(159)

赏金7天后到期。此问题的答案有资格获得+50声誉奖励。学员正在从信誉良好的来源寻求答案**:

我想用vue multiselect复制jquery功能
您好,我不知道我试图通过更改其数据并自动加载来实现特定组件的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 -> Bengalurucountry -> 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>

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题