Vue js обработка конкретного события?

Question

[Артур]

сам код

<li class="sidebar__item" v-for="category in sidebarList.cat">
                    <h2 class="sidebar__title" @click="sidebarshow()">{{category}}</h2>
                        <ul class="submenu" v-if='sidebarshow()'>
                            <li class="submenu__item" v-for="article in articles(category)">
                                <a href="" class="submenu__link">{{article}}</a>
                            </li>
                        </ul>
                   </li>
            </ul>

На выходе получается меню с submenu это все сделано, как тут правильно настроить ,чтоб при клике открывался только один из submenu ?
В jquery повесил бы обработчик на клик и получил бы родитель ,после нашел бы конкретное submenu и добавил бы класс
пример
$(this).parent.find('.submenu').addClass('active')
Но в Vue нечего не приходит в голову ,был бы рад любой помощи.

Answer 1

[0xD34F]

Добавляете в data свойство active, которое и используете для отображения нужного submenu вместо sidebarshow:

<li class="sidebar__item" v-for="(category, index) in sidebarList.cat">
  <h2 class="sidebar__title" @click="active = active === index ? null : index">{{ category }}</h2>
  <ul class="submenu" v-if="active === index">

Лучше конечно, если у вас в category есть какой-нибудь уникальный идентификатор - тогда вместо индекса следует использовать его.

Comments

[Артур]

Добрый день, спасибо за ответ ,но он не подходит ,там цикл и submenu там не одно и в таком случаи при клике на один сработают все.
А вот про идентификатор интересно ,думал об этом но как привязать его к обработчику ? можно даже ссылкой на статью(ru or eng не важно)

[0xD34F]

Не походит? Ну тогда сделайте примерчик на jsfiddle или codepen. А то непонятно, что там у вас.

UPD. С чего бы при клике на один должны сработать все - непонятно. Сделал пример - вроде всё работает как надо.

[Артур]

там получение данных из бд на codepen не стал делать
Попробую подробно объяснить

ul
   li
     h2{Имя категории}
     ul.submenu
         li
           a

есть список категорий в массиве
v-for="category in sidebarList.cat" получаем имена категорий из массива
а в submenu li v-for="article in articles(category)" получаем список записей по категориям

задача при клике на каждый h2{Имя категории} показать именно его submenu

[0xD34F]

"Там получение данных из бд" - и что? Сделайте какую-нибудь заглушку.

Выше я дал ссылку на рабочий пример - почему вы решили его проигнорировать? Похоже или нет на то что вам надо?

Ну и ещё один момент хочу уточнить. Ваше "не подходит" из первого комментария - это догадка или вы попробовали, и действительно не подошло?

[Артур]

0xD34F,
>>Выше я дал ссылку на рабочий пример - почему вы решили его проигнорировать? Похоже или нет на то что вам надо?
когда писал ответ вроде ссылку не видел,проверил все работает спасибо

[Павел Корнилов]

0xD34F, я дико извиняюсь за некропостинг, но вопрос как раз по вашему примеру.
Добавил обработчик событию клика и повесил на родительский элемент.

jsfiddle.net/puawgxk4

handle(e) {
    	console.log(e, arguments)
    }

Вопрос, думаю, понятен по коду: ГДЕ СОБЫТИЕ???
И, с учётом первого, как в этой ситуации проводить делегирование событий на дочерние элементы?

[0xD34F]

Привязывайте обработчик без списка параметров: @click="handle", объект события будет передан. Или явно указывайте объект события: @click="handle($event)".

как в этой ситуации проводить делегирование

Да как обычно - смотрите target, действуете по обстоятельствам. Это если вам действительно нужно делегирование (реально такая потребность возникает сильно реже, чем при использовании чистого js или jquery).

[Павел Корнилов]

0xD34F, спасибо за ответ, буду разбираться.
Я только изучаю Vue и пытаюсь пока действовать по привычке: сокращать количество обработчиков через делегирование. Это разве плохо?

[Павел Корнилов]

0xD34F, отлично, всё работает, спасибо!
Не мог даже предположить, что обработчик, вызванный инлайном вернёт не тело функции, а результат её работы...
Чувствую, Vue ещё сюрпризов накидает =)

[0xD34F]

Я только изучаю Vue и пытаюсь пока действовать по привычке: сокращать количество обработчиков через делегирование. Это разве плохо?

Всё это экономия на спичках. А вот код может стать сложнее. Например, если вам по событию надо будет обрабатывать данные, связанные с целевым элементом - без делегирования их можно сразу передать в качестве параметра, а с делегированием придётся доставать вручную. Ну и ещё проверять, откуда событие пришло. В качестве иллюстрации.

[Павел Корнилов]

0xD34F, круто, пока не могу быстро всё прочитать.
Но уже понятно, что 2 вариант как-то многодельнее. И неужели нет более быстрой возможности связки таргета с дата-объектом?
Ладно, я пока ещё далеко не всё освоил, но уже простенький SPA на локале сделать получилось.
Блин, но компоненты, шаблоныы... Нативный код проще читать в разы =)

[Павел Корнилов]

0xD34F, думаю, такой подход будет подвергнут резкой критике, как не отвечающий парадигме либы =)

https://jsfiddle.net/t7kvw0xf/

[0xD34F]

Да, будет. Как правильно работать с классами - читайте документацию.

[Павел Корнилов]

0xD34F, я её, родимую, как раз и изучаю сейчас. А эту главу как раз пропустил - перескочил по внутренней ссылке на работу с компонентами. Эх, чувствую - ещё разок нужно будет заново...