使用两个相互依赖的v-select框可以确保没有重复

Question

我有两个共享相似数据的v-select框。我从电子邮件中提取一些附件并加载到数组中。问题是一个选择框应该只选择一个文档，而另一个选择框应该只允许在第一个v-select框中未被选中的项目。我的模板代码如下:

<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>

我认为最好的办法是使第二个v-select项成为基于删除第一个v-select中所选值的计算属性。问题是你在第一个框中选择的似乎是第二个v-select中唯一可用的选项。这就像splice()不能正常工作。

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
}
},

Answer 1

哦，.splice()将修改输入数组并返回一个包含删除值的新数组:

const arr = [1,2,3,4]
const splicedOff = arr.splice(2,1)
const s = JSON.stringify
console.log('spliced:', s(splicedOff), 'remaining:', s(arr))

你只返回一个你不想返回的元素。

我能想到的一些修复方法:

• 在使用.splice()之前将新数组放入变量中并返回

const newAttachments = this.attachments.slice()
newAttachments.splice(i,1)
return newAttachments

• use.filter()

return this.attachments.filter((_,ix) => i !== ix)

使用filter()，您也可以摆脱外部循环:

availableSupportingDocs() {
return !this.selectedResponses 
? this.attachments
: this.attachments.filter((attachment) => this.selectedResponses.id !== attachment.id)
}

---

正如您在评论中所写的，当selectedResponses更改时，您可能必须更新selectedSupportingDocs的值。您可以使用监视器或事件处理程序来完成此操作。

手表应该是这样的:

watch: {
selectedResponses: function () {
if(this.selectedResponses?.id === this.selectedSupportingDocs.id) {
this.selectedSupportingDocs = null
}
},
},

在事件处理程序中，将@change添加到v-select:

<v-select
v-model="selectedResponses"
:items="attachments"
...
@change="adjustSupportingDocsSelection"
/>

处理程序然后位于组件方法中:

methods: {
adjustSupportingDocsSelection(){
// content is same as above
}
}

就我个人而言，我可能会使用事件处理程序，因为它更显式。如果有另一种机制可以改变selectedResponses，那么监视器是很好的，它涵盖了这两种机制。选择对你最有意义的。