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

Привет.
Есть компонент Кнопка, при клике на которую кнопка выделяется(размер, цвет и т.п.)
Три таких компонента кладем в НавБар/Меню. По отдельности при каждом клике каждая кнопка выделяется, при повторном - изменения отменяются.
Как при клике на одну кнопку отменить выделение других кнопок. Т.е. создать условие активности только одной кнопки за раз.
Костылями на ум приходят флаги.
Знаю, что правильнее делать через Event.Target, да код на отмену остальных не могу придумать.
Спасибо.
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Активность кнопки пусть задаётся извне:

props: {
  active: Boolean,
},

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

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

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

<v-button
  v-for="i in 3"
  :active="active === i"
  @click="active = active === i ? null : i"
>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы