Vuetify clone and filter v-select - vue.js

Question

I use vuetify v-select.
I want to clone the v-select with the array options from the first v-select and disabled (or remove) the selected values in the other v-select.
It can be clone multiple time and I want that if for example the 4 v-select is selected option X so this X option will be disabled in all the other v-select (also in the first one and reverse).
for example the options array:
[
{ title: 'title 1', id: '1', status: '0' },
{ title: 'title 2', id: '2', status: '0' },
{ title: 'title 3', id: '3', status: '0' },
{ title: 'title 4', id: '4', status: '0' }
]
Example

Answer 1

You can have vuetify v-select to clone the values to multiple select boxes as well as remove the one which is already selected from rest of the select boxes
Here is the working codepen : https://codepen.io/chansv/pen/wvvzbLX?editors=1010
You can have any number of select boxes just by looping through and assign the index as key to select box
Find the code below
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-btn #click="addSelectBox(true)">add select box</v-btn>
<div v-for="id in Object.keys(selectItems)" :key="id">
<v-select
v-model="selectItems[id].selected"
:items="selectItems[id].available"
label="Standard"
item-key="id"
item-value="id"
multiple
chips
deletable-chips
clearable
#change="modifyOthers"
></v-select>
<v-btn #click="deleteSelectBox(id)">delete select box</btn>
</div>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selectItems: {},
numberOfSelectBoxes: 4,
itemsBucket: [
{ title: 'title 1', id: '1', status: '0' },
{ title: 'title 2', id: '2', status: '0' },
{ title: 'title 3', id: '3', status: '0' },
{ title: 'title 4', id: '4', status: '0' }
],
allSelected: [],
allUnSelected: [],
}),
methods: {
modifyOthers(val, id) {
this.updateAllSelected();
this.updateAllUnselected();
this.updateAllAvailable();
},
updateAllSelected() {
this.allSelected = [];
var self = this;
Object.keys(self.selectItems).forEach(x => {
self.allSelected = self.allSelected.concat(self.selectItems[x].selected);
});
},
updateAllUnselected() {
this.allUnSelected = [];
var self = this;
this.allUnSelected = self.itemsBucket.map(x => x.id).filter(x => !self.allSelected.includes(x));
},
updateAllAvailable() {
var self = this;
Object.keys(self.selectItems).forEach(key => {
self.selectItems[key].available = self.itemsBucket.map(x => x.id).filter(x => {
return self.selectItems[key].selected.includes(x) || self.allUnSelected.includes(x);
});
});
},
addSelectBox(fromUI) {
var self = this;
if (fromUI) {
var currentLast = +Object.keys(self.selectItems)[Object.keys(self.selectItems).length -1];
var newIndex = currentLast + 1;
self.$set(self.selectItems, newIndex, {selected: '', available: []});
self.selectItems[newIndex].available = self.allUnSelected;
} else {
for (var i = 1; i <= this.numberOfSelectBoxes; i++) {
self.$set(self.selectItems, i, {selected: '', available: []});
self.selectItems[i].available = self.itemsBucket.map(y => y.id);
}
}
},
deleteSelectBox(id) {
delete this.selectItems[id];
this.modifyOthers();
}
},
created() {
this.addSelectBox(false);
this.updateAllUnselected();
}
})