Своя модалка под каждую запись?

Question

[Aleksandr]

Есть список новостей
При клике нужно открывать попап с полным описанием новости
Как лучше это реализовать?

Сейчас сделал компонент попапа, но пока не могу понять как в него передавать информацию выбранной записи

Answer 1

[Степан Крапивин]

С помощью слотов. На сайте vue есть даже пример

Comments

[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>
</div>
<popup v-if="showModal" @close="showModal = false">
	<div slot="title">{{ news.title }}</div>
</popup>

computed: {
    ...mapState({
        news: state => state.main_page.news,
    }),
},

попробовал через slot, почему данные не отображаются?

[Степан Крапивин]

Александр Котов, как выглядит шаблон компонента popup?

[Aleksandr]

<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>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Popup',
		data: () => ({
		    showModal: false
		}),
	}
</script>

[Степан Крапивин]

Александр Котов, похоже что компонент popup вне цикла, а значит не получает объект news.

<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>

[Aleksandr]

Степан
Подскажи пожалуйста
а как все-таки лучше сделать
как при клике по новости передавать ее id, чтоб в попап подгружать данные из ответа ?

[Aleksandr]

Степан, или как через props это организовать?

Answer 2

[Алексей Шашенков]

Менять данные в модалке, в зависимости от записи
Через props

Comments

[Aleksandr]

Ну вот как это сделать лучше?)

[Алексей Шашенков]

Через props

Answer 3

[Александр Аксентьев]

Через пропсы или стейт.

Если полные данные надо запрашивать с сервера, то естественно просто айдишник прокидывать и делать запрос на сервер из модалки.