дублирую вопрос...Максимально подробно его дополнила
Есть переменная openModalWindow
, которую я хочу использовать дважды на двух разных элементах (у меня это 2 кнопки)
С первой кнопкой всё уже реализовано.
При клике на кнопку "рандом"(метод random() ), openModalWindow = this.allMovies[rand]
(rand - это вычисленное значение, объект рандомный проще говоря)
И при клике на кнопку закрытия модалки, openModalWindow = null
При клике на "Подробнее"(showModalDialog() ) у меня openModalWindow
тоже должно иметь свое новое значение. Более того, должна быть идентификация по тому же индексу элемента массива, чтобы при клике на определенном элементе у меня было отображение информации, которая содержится в конкретном элементе.
Проще говоря: при клике на "рандом" в шаблоне модалки отрисовывается рандомный объект, при клике на определенном элементе массива (кнопка "Подробнее"), у меня отрисовывается в том же шаблоне "родной" объект, то есть на каком элементе была нажата эта кнопка, та информация и отрисовалась в модалке.
Не могу прописать саму логику второй функции...Хотя понимаю, как она должна работать. Не хватает знаний и опыта (месяц занимаюсь в принципе этим делом, включая верстку)
С кодом можно ознакомиться ниже. Для удобства лучше посмотреть за динамикой выполнения кода. ОЧЕНЬ буду ждать Ваших советов и идей:
new Vue({
el: '#movieApp',
data: {
openModalDialog: null,
randomMovieDescription: null,
showModalWindow: false,
movies: [
{
film: "Мстители",
year: 2012,
description: "Локи, сводный брат Тора, возвращается, и в этот раз он не один. Земля на грани порабощения, и только лучшие из лучших могут спасти человечество. Ник Фьюри, глава международной организации Щ. И. Т., собирает выдающихся поборников справедливости и добра, чтобы отразить атаку. Под предводительством Капитана Америки Железный Человек, Тор, Невероятный Халк, Соколиный глаз и Чёрная Вдова вступают в войну с захватчиком.",
image: 'https://st.kp.yandex.net/images/film_iphone/iphone360_263531.jpg',
watchOnline: 'https://www.youtube.com/embed/bxwt6TvNxas'
},
{
film: "Зеленая книга",
year: 2018,
description: "Утонченный светский лев, богатый и талантливый музыкант нанимает в качестве водителя и телохранителя человека, который менее всего подходит для этой работы. Тони по прозвищу Болтун — вышибала, не умеющий держать рот на замке и пользоваться столовыми приборами, зато он хорошо работает кулаками. Это турне навсегда изменит жизнь обоих.",
image: 'https://st.kp.yandex.net/images/film_iphone/iphone360_1108577.jpg?width=360?width=180',
watchOnline: 'https://www.youtube.com/embed/e6b9urtUJt0'
},
{
film: "Аватар",
year: 2009,
description: "Джейк Салли — бывший морской пехотинец, прикованный к инвалидному креслу. Несмотря на немощное тело, Джейк в душе по-прежнему остается воином. Он получает задание совершить путешествие в несколько световых лет к базе землян на планете Пандора, где корпорации добывают редкий минерал, имеющий огромное значение для выхода Земли из энергетического кризиса.",
image: 'http://www.icanbecreative.com/res/freeweb/2011/04/avatar-photoshop-tutorial.jpg',
watchOnline: 'https://www.youtube.com/embed/Tq6V6vlYrFg'
},
{
film: "Волк с УолСтрит",
year: 2013,
description: "1987 год. Джордан Белфорт становится брокером в успешном инвестиционном банке. Вскоре банк закрывается после внезапного обвала индекса Доу-Джонса. По совету жены Терезы Джордан устраивается в небольшое заведение, занимающееся мелкими акциями. ",
image: 'http://dstereo.ru/netcat_files/1518_122397.jpg',
watchOnline: 'https://www.youtube.com/embed/CHivqmutR0I'
},
{
film: "Аквамен",
year: 2018,
description: "Действие фильма разворачивается в необъятном и захватывающем подводном мире семи морей, а сюжет знакомит зрителей с историей происхождения получеловека-полуатланта Артура Карри и ключевыми событиями его жизни — теми, что заставят его не только столкнуться с самим собой, но и выяснить, достоин ли он быть тем, кем ему суждено… царем!",
image: 'https://static.kinoafisha.info/k/movie_posters/1920x1080/upload/movie_posters/2/2/7/8171722/8c22434b47452a3055495f8dd46fac7c.jpeg',
watchOnline: 'https://www.youtube.com/embed/3TBIf36qiGE'
},
{
film: "Джон Уик",
year: 2014,
description: "После того, как сынок главы бандитской группы со своими приятелями угоняет любимый «Мустанг» Джона 1969 года выпуска, при этом убив его собаку Дейзи, которая была единственным напоминанием об умершей супруге, Джон вынужден вернуться к своему прошлому. Теперь Уик начинает охоту за теми, кто имел неосторожность перейти ему дорогу, и он готов на всё, чтобы отомстить.",
image: 'https://upload.wikimedia.org/wikipedia/ru/e/e5/%D0%94%D0%B6%D0%BE%D0%BD_%D0%A3%D0%B8%D0%BA.jpg',
watchOnline: 'https://www.youtube.com/embed/gLGaBb_EFkg'
},
{
film: "Прибытие",
year: 2016,
description: "Неожиданное появление неопознанных летающих объектов в разных точках планеты повергает мир в трепет. Правительство обращается за помощью к лингвисту Луизе Бэнкс и физику Яну Доннели, чтобы предотвратить глобальную катастрофу и найти общий язык с пришельцами. Отныне судьба человечества находится в их руках.",
image: 'https://st.kp.yandex.net/images/film_iphone/iphone360_718811.jpg',
watchOnline: 'https://www.youtube.com/embed/5Dyoa99FZiw'
},
{
film: "Алита",
year: 2019,
description: "Действие фильма происходит через 300 лет после Великой войны в XXVI веке. Доктор Идо находит останки женщины-киборга. После починки киборг ничего не помнит, но обнаруживает, что в состоянии пользоваться боевыми приемами киборгов. Начинаются поиски утерянных воспоминаний.",
image: 'http://brest.biz/source/photos/2019/02/13/1549526281-17371.jpg',
watchOnline: 'https://www.youtube.com/embed/yZSj8zGnKBY'
}
],
search: '',
sortByYear: true,
alphabeticalSorting: true
},
created() {
this.movies = this.movies.map(function (movieItem, index) {
return {
id: index,
like: true,
seen: true,
showDescription: false,
isHidden: false,
...movieItem
};
})
},
computed: {
filteredMovies: function () {
return this.movies.filter(
m => m.film.toLowerCase().indexOf(this.search) > -1 && !m.seen);
},
watched: function () {
return this.movies.filter(
n => n.film.toLowerCase().indexOf(this.search) > -1 && n.seen);
},
},
methods: {
random: function () {
var rand = Math.floor(Math.random() * this.movies.length);
this.openModalDialog = this.movies[rand];
},
closeModalDialog: function () {
this.openModalDialog = null;
},
showModalDialog: function (id) {
this.showModalWindow = true;
this.openModalDialog = this.movies[id];
// this.openModalDialog = this.movies
}
}
});
body {
display: flex;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
color: #444;
background-repeat: no-repeat;
background-size: cover;
align-items: center;
justify-content: center;
margin: 0;
}
.movieApp {
display: flex;
justify-content: space-evenly;
}
[v-cloak] {
display: none;
}
.list {
width: 400px;
background-color: #ECEFF1;
overflow: hidden;
position: relative;
border-radius: 5px;
}
.list__container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.list__container__btn {
height: 35px;
border: 0;
border-radius: 5px;
font-weight: 600;
color: white;
outline: none;
background-color: #9FA8DA;
cursor: pointer;
}
.list__container__btn:active {
background-color: #5C6BC0;
}
.list__container__search {
color: #547c8f;
font-weight: normal;
line-height: 2em;
border-radius: 3px;
border: 0;
display: inline-block;
margin: 15px 0;
padding: 0.2em 1em;
font-size: 1em;
transition: all ease-in 0.25s;
width: 200px;
height: 35px;
outline: none;
background-color: #CFD8DC;
}
.list__container__search:focus {
outline: none;
border: 1px solid #a3b1ff;
}
.list__container__search::placeholder {
color: rgba(0, 0, 0, 0.3);
font-style: italic;
}
.list__container__sortByYear {
background: url(../movieApp/icons/sortByYear.svg) no-repeat;
}
.list__container__sortByAlphabet {
background-color: rgba(159, 168, 218, 0);
background: url(../movieApp/icons/sortByAlphabet.svg) no-repeat;
}
.list__movieList {
padding: 0;
margin-bottom: 30px;
margin-block-end: 0;
margin-block-start: 0;
overflow: auto;
height: auto;
}
.list__movieList li {
margin: 10px 0;
background: #CFD8DC;
border-radius: 3px;
padding: 5px 10px;
overflow: hidden;
flex-direction: column;
}
.list__movieList__film {
position: relative;
display: inline-block;
padding: 0 0.5em;
color: white;
}
.list p {
text-align: center;
color: #455A64;
font-size: 20px;
margin-block-end: 0;
margin-block-start: 0;
}
.list__movieList__showDescription span,
.list__movieList__show span, .list__movieList__description span {
display: block;
width: 100%;
text-align: center;
padding-top: 10px;
color: #247194;
font-size: 12px;
overflow: auto;
height: 25px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgb(98, 116, 197);
box-shadow: inset 0 0 6px rgb(98, 116, 197);
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(19, 118, 179, 0.6);
box-shadow: inset 0 0 6px rgba(19, 118, 179, 0.6);
border-radius: 3px;
}
.list__movieList__icons {
width: 30px;
height: 30px;
background-size: contain!important;
opacity: .6;
cursor: pointer;
border: 0;
outline: none;
}
.list__movieList__icons__disliked {
background: url(../movieApp/icons/likeOutline.svg) no-repeat;
transition: all .3s ease;
}
.list__movieList__icons__liked {
background: url(../movieApp/icons/liked.png) no-repeat;
transition: all .3s ease;
}
.list__movieList__icons__descriptionOff {
background: url(../movieApp/icons/descriptionHidden.svg) no-repeat;
transform: rotate(90deg);
transition: all .3s ease;
opacity: .2;
}
.list__movieList__icons__descriptionOn {
background: url(../movieApp/icons/descriptionOpen.svg) no-repeat;
transform: rotate(90deg);
transition: all .3s ease;
}
.list__movieList li {
display: flex;
justify-content: space-between;
}
.list__movieList__list {
display: flex;
width: 100%;
justify-content: space-evenly;
}
.randomBlock div {
width: 510px;
height: 390px;
font-size: 14px;
color: gray;
}
.randomBlock p {
color: gray;
margin-block-end: 20px;
text-align: center;
margin-block-start: 0;
font-size: 20px;
}
.randomBlock span {
display: block;
}
.randomBlock__movies__containerToRandomFilm__poster img {
width: 250px!important;
height: 390px;
}
.randomBlock {
padding-left: 15px;
}
.randomBlock__movies p {
font-size: 14px!important;
}
.randomBlock__movies span {
width: 245px;
text-align: justify;
margin-left: 10px;
height: auto;
}
.randomBlock__movies__containerToRandomFilm {
display: flex;
}
.randomBlock__movies h3 {
text-align: center;
}
.randomBlock__movies__containerToRandomFilm__trailer iframe {
padding-left: 10px;
}
.randomBlock__movies__containerToRandomFilm__poster {
flex: auto;
flex-grow: 2;
}
.randomBlock__movies__containerToRandomFilm__trailer {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.modalDialog {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.616);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.modalDialog--false {
display: none;
}
.modalDialog--true {
display: block;
}
.modalDialog__btn {
background: #8db7be;
color: #FFFFFF;
position: absolute;
text-align: center;
width: 30px;
height: 30px;
text-decoration: none;
font-weight: bold;
border-radius: 30px;
border: 0;
cursor: pointer;
top: -10px;
right: -10px;
outline: none;
}
.modalDialog__container {
width: 430px;
height: 700px;
background-color: white;
position: relative;
}
.modalDialog__btn:hover {
background: #fd574b;
}
.container__modalDialog__generalInformation {
height: 100%;
}
.container__modalDialog__generalInformation--name {
display: flex;
flex-direction: column;
}
.container__modalDialog__generalInformation--name span:first-child {
font-weight: bold;
text-align: center;
padding-top: 10px;
}
.container__modalDialog__generalInformation--name span:last-child {
color: gray;
text-align: center;
padding-bottom: 10px;
}
.container__modalDialog__info td {
height: 50px;
width: 80px !important;
}
.container__modalDialog__info td:first-child {
font-weight: bold;
width: 60px !important;
}
.container__modalDialog__info {
display: flex;
align-items: center;
}
.container__modalDialog__generalInformation--flexPositioning {
display: flex;
justify-content: space-around;
}
.container__modalDialog__watch {
display: flex;
}
.container__modalDialog__description div {
padding: 10px 15px 0;
text-align: justify;
display: flex;
align-items: center;
justify-content: space-between;
}
iframe {
width: 245px;
height: 150px;
border: 0;
}
img {
width: 120px;
height: 170px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Приложение для выбора случайных фильмов</title>
<link href="movieApp.css" rel="stylesheet">
<link href="movieAppCheckboxesStyles.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="ageSlider"></div>
<input type="hidden" id="minAge" v-model="minAge" />
<input type="hidden" id="maxAge" v-model="maxAge" />
</div>
<div id="movieApp" class="movieApp" v-cloak>
<div class="list">
<div class="list__container">
<button class="list__container__btn" v-on:click="random()">Рандом</button>
<input type="text" class="list__container__search" v-model="search" placeholder="Поиск по фильмам">
</div>
<div>
<p>Список фильмов</p>
<div class="list__movieList__show" v-if="filteredMovies.length <= 0">
<span>Все фильмы из списка Вы уже просмотрели</span>
</div>
<ul class="list__movieList">
<li v-for="(movie, index) in filteredMovies">
<div class="list__movieList__list">
<input class="list__movieList__seenAndSort" v-bind:id="'movie' + movie.id"
v-model="movie.seen" type="checkbox">
<label v-bind:for="'movie' + movie.id">{{ movie.film }}, {{ movie.year }}
</label>
<button v-on:click="showModalDialog()" class="list__container__btn">Подробнее</button>
</div>
</li>
</ul>
</div>
<div>
<p>Просмотренные</p>
<div class="list__movieList__showDescription" v-if="watched.length <= 0">
<span>Нет просмотренных фильмов</span>
</div>
<ul class="list__movieList">
<li v-for="(movie, index) in watched">
<div class="list__movieList__list">
<input class="list__movieList__seenAndSort" v-bind:id="'movie' + movie.id"
v-model="movie.seen" type="checkbox">
<label v-bind:for="'movie' + movie.id">{{ movie.film }}, {{ movie.year }}</label>
<button v-on:click="showModalDialog(id)">Подробнее</button>
</div>
</li>
</ul>
</div>
</div>
<div class="modalDialog" v-if='openModalDialog != null || showModalWindow != false'>
<div class="modalDialog__container">
<button class="modalDialog__btn" v-on:click="closeModalDialog()">X</button>
<div class="container__modalDialog__generalInformation">
<div class="container__modalDialog__generalInformation--name">
<span>{{ openModalDialog.film }}, {{ openModalDialog.year }}</span>
<span>{{ openModalDialog.filmEN }}</span>
</div>
<div class="test1">
<div class="container__modalDialog__generalInformation--flexPositioning">
<div class="container__modalDialog__poster">
<img v-bind:src="openModalDialog.image">
</div>
<div class="container__modalDialog__info">
<table>
<tr>
<td>Оценка</td>
<td>{{ openModalDialog.score }} из 10</td>
</tr>
<tr>
<td>Жанр</td>
<td>{{ openModalDialog.genre }}</td>
</tr>
<tr>
<td>Страна</td>
<td>{{ openModalDialog.country }}</td>
</tr>
<tr>
<td>Время</td>
<td>{{ openModalDialog.time }}</td>
</tr>
</table>
</div>
</div>
<div class="container__modalDialog__description">
<div>{{ openModalDialog.description }}</div>
<div class="container__modalDialog__watch">
<iframe v-bind:src="openModalDialog.watchOnline"></iframe>
<button class="list__container__btn">смотреть онлайн</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="movieApp.js"></script>
</body>
</html>
showModalDialog: function (index)
, и откройте что вам надо. Не понимаю, для чего в одну и туже функцию разный функционал пихать, тем более, что обработчика событий 2. Одна функция - одна задача.