如何通过单击按钮拥有多个vue-multiselect实例

Question

我想要一个vue-multiselect下拉菜单，点击add more按钮

目前我不知道有什么好办法

Problem/Question:如果我添加了2个下拉列表，如果我选择了一个选项，也选择了相同的选项，我想避免这样做。

注意：每个添加都应该有自己的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]"将每个选择绑定到该数组中的相应值。

​

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>

​