I am currently working with two v-select boxes that share similar data. In my scenario, I extract attachments from an email and load them into an array. The issue I encountered is that the first select box should only allow the selection of one document, while the second select box should only display items that have not been chosen in the first v-select box. Below is a snippet of my template code:
<v-select v-model="selectedResponses"
:items="attachments"
item-value="id"
item-text="name"
label="First Document"
persistent-hint
filled
chips
return-object></v-select>
<v-select v-model="selectedSupportingDocs"
:items="availableSupportingDocs"
item-value="id"
item-text="name"
label="Additional Documents"
persistent-hint
multiple
filled
chips
return-object></v-select>
To address this issue, I decided to make the items for the second v-select box a computed property by removing the selected value in the first v-select box. However, the problem I'm facing is that whatever I choose in the first box becomes the only available option in the second v-select box. It seems like the splice() function is not working as expected.
computed: {
availableSupportingDocs() {
if (this.selectedResponses == null) return this.attachments;
for (let i = 0; i < this.attachments.length; i++) {
if (this.selectedResponses.id === this.attachments[i]["id"]) {
console.log(this.attachments[i]["name"])
console.log(this.attachments.slice().splice(i, 1))
return this.attachments.slice().splice(i,1)
}
}
return this.attachments
}
},