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

Question

i want to have a vue-multiselect dropwn with a click of add more button

currently i don't know any good approach

Problem/Question: if i add 2 dropdowns, if i select a option same option is selected for other one also, i want to avoid that.

Note: each add more should have its own instance of 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

Define value as an empty array then bind each select to the respective value in that array based on the loop index 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>