Vue JS - Как вы можете обеспечить тот же элемент из общего списка не выбирается дважды в нескольких компонентах?

Question

Быстрый контекст:

У меня есть родительский родитель. vue, который передает тот же список

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

для нескольких компонентов на одной странице. Ни один из пунктов в списке не может быть выбран дважды.

То, что я пробовал:

Итак, мой родитель создает компонент Child. vue и проходит в этот список. Child. vue props принимает его, затем заполняет поля: items <v-select>. В результате мы видим все 3 пункта. Я выбираю «два». Я связываюсь с событием change, поэтому я $ emit для родительского ключа («two») и флага (selected: true), чтобы родительский элемент отфильтровывал список, так что теперь есть только «one» и «three». Если бы я добавил еще один компонент в этот момент - все хорошо - он бы имел только «один» и «три» для выбора. Моя проблема в том, что когда я выбираю этот «два» пункта - он исчезает. Прежде всего потому, что родитель выносит этот предмет. Но ... как мне сделать так, чтобы он либо остался (что указывает на то, что этот элемент был выбран), а другие компоненты больше не могут его выбрать? Можно ли отключить только этот «два» элемента для выбора (в случае, если другие компоненты попытаются выбрать его - они не могут).

Я могу сделать это легко с простым HTML и JS - с Vue / Vuetify - как мне сделать sh это?

Answer 1

То, что я в итоге сделал, это привязка к: item-disabled свойство - я привязал выбранный и поддерживаю его от родителя во всех дочерних компонентах. Это отменено - я отправляю событие родителю, говоря, что эй элемент с идентификатором "this" больше не выбран. Это, в свою очередь, обновляет его для всех компонентов, которые получают этот список через реквизит. Ohgodwhy имеет довольно похожее решение (спасибо!).

Answer 2

Вы можете сделать это, добавив свойство под названием 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"