0

дублирую вопрос...Максимально подробно его дополнила

Есть переменная 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>

3
  • Ну передайте параметр в функцию. Индекс. showModalDialog: function (index), и откройте что вам надо. Не понимаю, для чего в одну и туже функцию разный функционал пихать, тем более, что обработчика событий 2. Одна функция - одна задача. 12 апр 2019 в 11:17
  • @AlexSazonov это 2 разные функции. Для вывода данных рандомных объектов, а вторая для вывода данных отдельного объекта массива. Потому и задала вопрос, ибо не понимаю, как прописать функционал в моем случае..
    – nbelle
    15 апр 2019 в 8:30
  • проблема пока так и остается не решенной. Спросить некого, я самоучка, интернет ответов не дал. Потому здесь и задаю такие вопросы. Ибо сама пока не поняла как это реализовать, наставников нет, чтобы уточнить, хотелось, чтобы прояснили ситуацию маленько
    – nbelle
    15 апр 2019 в 8:31

1 ответ 1

0

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.showModalWindow = false;
            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(movie.id)" 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(movie.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>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.