如何通过单击按钮获得多个 vue-multiselect 实例

Question

我想要一个 vue-multiselect dropwn，点击添加更多按钮

目前我不知道有什么好的方法

Problem/Question: 如果我添加 2 个下拉菜单，如果我 select 一个选项相同的选项也被 selected 用于其他选项，我想避免这种情况。

注意：每次添加都应该有自己的实例vue-multiselect

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
       value: "",
       options:['Calender','Range','Amount'],
       
       multiselectList:[],
    }
  },
  methods:{
      AddMoreMultiselect(){
         this.multiselectList.push('1 more multiselect'); 
      },
      remove(index){
          this.multiselectList.splice(index,1)
      }
  },
})

#app{
  //margin-top:30px;
}


.items{
    display: flex;
    justify-content: space-between;
}

.multiselect{
    width: 80%;
 }

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

   <div><button @click="AddMoreMultiselect()">Add More</button></div>

    <div class="items" v-for="(multiselect,index) in multiselectList" :key="index">
         <multiselect
        v-model="value"
        :options="options"
         :multiple="false"
        :taggable="false"
      ></multiselect>
      <div><button @click="remove(index)">Remove</button></div>
   </div>
</div>

Answer 1

将 value 定义为一个空数组，然后根据循环索引 v-model="value[index]":

将每个 select 绑定到该数组中的相应值

var app = new Vue({
  el: '#app',
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data() {
    return {
      value: [],
      options: ['Calender', 'Range', 'Amount'],

      multiselectList: [],
    }
  },
  methods: {
    AddMoreMultiselect() {
      this.multiselectList.push('1 more multiselect');
    },
    remove(index) {
      this.multiselectList.splice(index, 1)
    }
  },
})

#app {
  //margin-top:30px;
}

.items {
  display: flex;
  justify-content: space-between;
}

.multiselect {
  width: 80%;
}

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

  <div><button @click="AddMoreMultiselect()">Add More</button></div>

  <div class="items" v-for="(multiselect,index) in multiselectList" :key="index">
    <multiselect v-model="value[index]" :options="options" :multiple="false" :taggable="false"></multiselect>
    <div><button @click="remove(index)">Remove</button></div>
  </div>

</div>

如何通过单击按钮获得多个 vue-multiselect 实例

How to have multiple instances of vue-multiselect with a click of a button

javascript

vue.js

vuejs3

vue-multiselect