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

Question

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

目前我不知道任何好的方法

问题/问题：如果我添加 2 个下拉列表，如果我选择一个选项，也为另一个选项选择了相同的选项，我想避免这种情况。

注意：每个 add more 都应该有自己的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>