I am trying to implement a vue-multiselect dropdown with the addition of a new dropdown upon clicking an "add more" button.
However, I am currently unsure of the best approach to achieve this.
Problem/Question: When adding 2 dropdowns, if the same option is selected in one dropdown, it is automatically selected in the other dropdown as well. I want to prevent this behavior.
Note: Each click of the "add more" button should create a separate 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4c4f564e53495f565f594e7a08140b140a">[email protected]</a>"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b4d4e5e574e575648575f52485e575e584f7b09150a150b">[email protected]</a>/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>