Как создать активность только одного элемента из многих?

Question

[Александр]

Привет.
Есть компонент Кнопка, при клике на которую кнопка выделяется(размер, цвет и т.п.)
Три таких компонента кладем в НавБар/Меню. По отдельности при каждом клике каждая кнопка выделяется, при повторном - изменения отменяются.
Как при клике на одну кнопку отменить выделение других кнопок. Т.е. создать условие активности только одной кнопки за раз.
Костылями на ум приходят флаги.
Знаю, что правильнее делать через Event.Target, да код на отмену остальных не могу придумать.
Спасибо.

Answer 1

[0xD34F]

Активность кнопки пусть задаётся извне:

props: {
  active: Boolean,
},

В родителе должно быть свойство, указывающее, кто активен (хранит индекс/имя/id - что-то, что имеет уникальное значение для каждой из кнопок):

data: () => ({
  active: null,
}),

Активность конкретной кнопки вычисляете в зависимости от равенства упомянутой выше уникальной характеристики кнопок значению свойства активности; по клику переключаете значение активности:

<v-button
  v-for="i in 3"
  :active="active === i"
  @click="active = active === i ? null : i"
>

Comments

[Александр]

Я понял, о чем вы говорите, но реализовать так и не смог пока =) Спасибо