Почему скрипт не срабатывает с первого клика?

Question

[Владимир Голубь]

Вешаю событие на элемент:

<div class="item-card__header" @click="showDocuments($event)">

Создаю метод в methods:

showDocuments: function (event) {
			if(event.currentTarget.nextElementSibling.style.display == 'none') {
				event.currentTarget.nextElementSibling.style.display = 'block';
			} else {
				event.currentTarget.nextElementSibling.style.display = 'none';
			}
		},

При первом клике событие происходит (проверил console.log() ) ,но event не срабатывает.
При втором клике элемент появляется. Что не так ?

Answer 1

[0xD34F]

Это неправильный подход. Сделайте свойство showDocs, которое будет отвечать за видимость элемента, а на сам элемент добавьте v-show="showDocs". Обработка клика станет выглядеть так: @click="showDocs = !showDocs".

Ну а почему ваш код не работает как надо - так это потому, что дефолтное значение style.display вовсе не none, а пустая строка (скорее всего - вы ведь элемент через css изначально скрываете, да?).

UPD. Вынесено из комментариев:

Так не получиться, так как вывожу элементы в цикле v-for.

Получится. Задайте каждому из перебираемых объектов отдельное свойство, отвечающее за его видимость, как-то так. Или сделайте компонент для отображения отдельного элемента, который будет содержать в себе свойство, управляющее видимостью.

Comments

[Владимир Голубь]

Так не получиться, так как вывожу элементы в цикле v-for.
Да, значение задаю через css.

[Владимир Голубь]

if(event.currentTarget.nextElementSibling.style.display == 'none' || event.currentTarget.nextElementSibling.style.display == '') {

Так заработало

[0xD34F]

Владимир Голубь,

Так не получиться...

Дополнил ответ.

Answer 2

[Алексей Ярков]

Значит при первом клике event.currentTarget.nextElementSibling.style.display не равно 'none'