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

Вешаю событие на элемент:
<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 не срабатывает.
При втором клике элемент появляется. Что не так ?
  • Вопрос задан
  • 535 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Это неправильный подход. Сделайте свойство showDocs, которое будет отвечать за видимость элемента, а на сам элемент добавьте v-show="showDocs". Обработка клика станет выглядеть так: @click="showDocs = !showDocs".

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

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

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

Получится. Задайте каждому из перебираемых объектов отдельное свойство, отвечающее за его видимость, как-то так. Или сделайте компонент для отображения отдельного элемента, который будет содержать в себе свойство, управляющее видимостью.
Ответ написан
yarkov
@yarkov Куратор тега Vue.js
Помог ответ? Отметь решением.
Значит при первом клике event.currentTarget.nextElementSibling.style.display не равно 'none'
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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