Vue JS - 如何确保公共列表 <v-select> 中的同一项目不会在多个组件中被选中两次？

Posted 2023-02-16

【中文标题】Vue JS - 如何确保公共列表 <v-select> 中的同一项目不会在多个组件中被选中两次？

【英文标题】：Vue JS - How can you ensure the same item from the common list <v-select> does not get selected twice in multiple components?

【发布时间】：2020-06-06 09:41:14

【问题描述】：

快速上下文：

我有一个提供相同列表的父 Parent.vue

[key: "one", selected: false], key: "two", selected: false, key: "three", selected: false]

到同一页面的多个组件。列表中的任何项目都不能被选择两次。

我尝试过的：

所以我的父母创建了一个 Child.vue 组件并传入这个列表。 Child.vue props 接受它然后填充 <v-select> 的 :items 字段。结果，我们看到了所有 3 个项目。我选择“两个”。我绑定到更改事件，所以我 $emit 将键（“二”）和标志（选择：真）作为父级，因此父级过滤掉列表，因此现在只有“一”和“三”。如果此时我要添加另一个组件——一切都很好——它将只有“一个”和“三个”可供选择。我的问题是，当我选择这个“两个”项目时 - 它消失了。主要是因为父母把这个项目拿出来了。但是......我如何使它保持不变（表明该项目已被选中）并且其他组件无法再选择它？我可以只禁用这个“两个”项目以供选择吗（以防其他组件​​尝试选择它 - 他们不能）。

我可以使用纯 HTML 和 JS 轻松完成 - 使用 Vue / Vuetify - 我怎样才能做到这一点？

【问题讨论】：

我这样做的方式（通过将元素之一设置为 selected: true 来删除项目）在多个组件无法选择它的情况下完成这项工作。问题是原始组件没有保存它 - 它只是清除它。我有价值，但视觉消失了。我希望视觉效果保持不变——然后我就准备好了。另一种方法是可能以某种方式禁用此项目“二”，因此它在列表中，但您不能再选择它。你能做类似 的事情吗

【参考方案1】：

您可以通过将名为disabled 的属性添加到您的项目并根据其他项目的选择计算该属性的值来做到这一点：

get filteredItems() 
    return this.items.map((item) => 
      id: item.identifier, // replace this with the items identifier
      text: item.text_value, // replace this with your items display text
      disabled: this.items.filter((item) => [...this.firstSelection,...this.secondSelection].filter((selection) => selection === item).length > 0)
      // ^ replace the above destructured array params with your real v-model bindings
      // if the v-models bindings aren't arrays (and the select isn't multiple)
      // then there is no reason to destructure that value
    )

现在修改您的v-select 组件并为item-disabled 属性添加一个与key 匹配的值，我们可以在map 中查找该值：

<v-select :items="filteredItems" item-text="text" item-id="id" item-disabled="disabled"

【讨论】：

感谢您的回复-我认为这也可以！我选择了一个更简单的解决方案。

【参考方案2】：

所以我最终做的是绑定到 :item-disabled 属性 - 我将选择绑定到所有子组件中的父级并对其进行维护。它被取消选择 - 我向父级发出事件，说 id "this" 的嘿元素不再被选中。这反过来会刷新所有通过 props 获取此列表的组件。 Ohgodwhy 有一个非常相似的解决方案（谢谢！）。