Почему не рабоает emit?

Question

[Aleksandr]

<div class="news-block" v-for="(news, index) in news" :key="index" @click="showModal = true">
	<div class="news-block__img" :style="`background-image: url(${news.img});`"></div>
	<div class="news__block__right"><span class="news-block__date">{{ news.date }}</span>
      <p class="news-block__text">
  			{{ news.title }}
      </p>
      <span class="news-block__label">Мини-КАСКО</span>
    </div>
    <popup v-if="showModal" @close="showModal = false">
		<div slot="title">{{ news.title }}</div>
	</popup>
</div>

<template id="modal-template">
	<div class="main-news-popup">
		<div class="news-popup">
			<div class="overlay"></div>
			<div class="news-popup__content">
				<div class="news-popup__content__close" @click="$emit('close')"></div>
				<div class="news-popup__content__top">
					<div class="news-popup__content__top__left" style="background-image:url(../../../../static/img/car.jpg)"></div>
					<div class="news-popup__content__top__right">
						<div class="news-popup__content__title">
							<slot name="title"></slot>
						</div>
						<div class="news-popup__content__top__bottom">
							<span class="news-popup__content__top__bottom__date">
								<slot name="date"></slot>
							</span>
							<span class="news-block__label">Рейтинги</span>
						</div>
					</div>
				</div>
				<div class="news-popup__content__bottom">
					<p class="news-popup__content__bottom__p">Рейтинговое агентство RAEX (Эксперт РА) подтвердило рейтинг финансовой надежности ПАО "САК «ЭНЕРГОГАРАНТ» на уровне ruАА- со стабильным прогнозом.</p>
					<p class="news-popup__content__bottom__p">В числе позитивных факторов, влияющих на рейтинг, аналитики выделяют стабильность структуры страхового портфеля, низкую убыточность по основным видам деятельности, низкую зависимость от основных клиентов и финансовый результат, характеризующийся высокими показателями рентабельности собственных средств.</p>
					<p class="news-popup__content__bottom__p">Позитивное влияние на уровень рейтинга оказывает высокое качество активов страховщика, а также высокое отклонение фактического размера маржи платежеспособности от нормативного значения (132,4% на 30.09.2017).</p>
					<p class="news-popup__content__bottom__p">Энергогарант - крупный федеральный страховщик, занимающий существенную долю на российском рынке, что, согласно методологии Агентства, выделяется в качестве фактора поддержки уровня рейтинга. Стратегия компании соответствует текущему состоянию экономики, страховой портфель компании характеризуется высокой диверсификацией по видам и географии деятельности, говорится в пресс-релизе RAEX.</p>
					<a class="news-popup__content__bottom__a" href="#">https://raexpert.ru/releases/2017/Dec26</a>
				</div>
			</div>
		</div>
	</div>
</template>

Answer 1

[0xD34F]

А с чего вы взяли, что emit не работает, чем докажете свои слова?

Я так думаю - всё работает, просто вы забыли о всплытии событий. Вы кликаете на .news-popup__content__close, генерируется событие click, оно обрабатывается - выполняется emit, генерируется событие close, оно обрабатывается в соответствующем обработчике, popup убирается. При этом событие click никуда не делось, оно всплывает, и в .news-block обрабатывается ещё раз - только что удалённый popup снова рендерится. Ну а внешне это всё выглядит так, будто ничего и не произошло.

Что делать? Понятно что - останавливать всплытие, т.е.,

<div class="news-popup__content__close" @click="$emit('close')"></div>

замените на

<div class="news-popup__content__close" @click.stop="$emit('close')"></div>

P.S. А почему на каждый элемент .news-block у вас отдельный popup, что за дичь-то такая?

Comments

[Aleksandr]

Спасибо.
А вот насчёт множества попапов, подскажите как лучше реализовать данный функционал

[Aleksandr]

Да и на тему с чего взял, что не отрабатывает. В vue tools есть же вкладка events, вот там ничего не происходит при клике

[0xD34F]

Александр Котов,

насчёт множества попапов, подскажите как лучше реализовать данный функционал

Выносите popup из news-block'а. Вместо showModal заводите переменную selectedBlock - будет содержать данные выбранного блока, изначально null; условие отображения popup'а соответственно будет таким: v-if="selectedBlock"; при клике на блок устанавливаете значение: @click="selectedBlock = news"; закрытие обрабатываете так: @close="selectedBlock = null"; в слот передаёте {{ selectedBlock.title }}.

В vue tools есть же вкладка events, вот там ничего не происходит при клике

В это я поверить не могу. Либо вы куда-то не туда смотрите, либо обманываете насчёт кода.

[Aleksandr]

0xD34F, я завтра как доеду до работу. Точно покажу.

[Aleksandr]

0xD34F, Разобрался со всем
Спасибо!
Один вопросик остался:
как передавать в попап данные я понял - через слоты, а как передавать в попап данные
для такого примера?

<div class="news-popup__content__top__left" style="background-image:url("сюда же слот не вставишь")"></div>

[0xD34F]

Параметры.

props: [ 'image_url' ],

:style="`background:url(${image_url})`"

[Aleksandr]

0xD34F, и опять разобрался) Спасибо вам, прекрасный человек!)