Как запретить выбор значений, которые не входят в группу?

Question

[Ярослав]

есть массив объектов, свойства которых являются массивами объектов:

const data = [
	{
		id: 1,
		items: [
			{
				group: "a",
				name: "name",
				checked: false
			},
			{
				group: "b",
				name: "name",
				checked: false
			}
		]
	},
	{
		id: 2,
		items: [
			{
				group: "c",
				name: "name",
				checked: false
			},
			{
				group: "b",
				name: "name",
				checked: false
			}
		]
	}
];

const groups = {
	ab: ["a", "b"],
	c: ["c"]
}

Как запретить выбор объектов из группы "c" (нельзя поставить checked = true), когда выбраны объекты из группы "ab" и наоборот? Подскажите алгоритм действий, пожалуйста.

Answer 1

[0xD34F]

Сделаем метод, получающий item и возвращающий его группу:

methods: {
  group(item) {
    return item && Object.entries(this.groups).find(([ k, v ]) => v.includes(item.group))[0];
  },

Сделаем вычисляемое свойство, представляющее выбранную группу:

computed: {
  selectedGroup() {
    return this.group([].concat(...this.data.map(n => n.items)).find(n => n.checked));
  },

Если выбранная группа есть и не совпадает с группой текущего item'а, блокируем чекбокс:

<ul v-for="{ items } in data">
  <li v-for="item in items">
    <label>
      <input
        type="checkbox"
        v-model="item.checked"
        :disabled="selectedGroup && selectedGroup !== group(item)"
      >
      {{ item.name }} ({{ group(item) }})
    </label>
  </li>
</ul>

https://jsfiddle.net/cqm1erza/