<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>
<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,
}),
},
https://codepen.io/anon/pen/rvLpay
вот при клике по периодам в датапикере должна меняться дата на соответствующую
ну и при клике на применить запрос должен соответстующий улетать