Untitled
unknown
javascript
3 years ago
2.1 kB
5
Indexable
Never
<template> <div> <div> <b-button variant="primary"> <b-spinner small type="grow"></b-spinner> Loading... </b-button> </div> <section class="card-container"> <div class="flex justify-content-center align-items-center" style="z-index: 3" > <Vue2InteractDraggable v-if="isVisible" :interact-out-of-sight-x-coordinate="1000" :interact-max-rotation="15" :interact-x-threshold="200" :interact-y-threshold="200" class="rounded-borders shadow card" @draggedRight="swipedRight" @draggedLeft="swipedLeft" > <div class="movie-info"> <p>{{ movieList[0].overview }}</p> </div> </Vue2InteractDraggable> </div> </section> </div> </template> <script> /* eslint-disable */ import Book from "./Book.vue"; import { Vue2InteractDraggable } from "vue2-interact"; export default { data() { return { isVisible: true, movieList: [], }; }, components: { Book, Vue2InteractDraggable }, methods: { swipedRight() { setTimeout(() => { this.movieList.shift(); this.isVisible = false; console.log(this.movieList); }, 200); setTimeout(() => { this.isVisible = true; }, 300); }, swipedLeft() { setTimeout(() => { this.movieList.shift(); this.isVisible = false; console.log(this.movieList); }, 200); setTimeout(() => { this.isVisible = true; }, 300); }, async getMovieList() { const resp = await fetch("http://localhost:5000/movies", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ genre_id: this.$route.params.genre }) }); let responseData = await resp.json(responseData); console.log("CATEGORY LIST WHOLE", responseData); this.movieList = responseData.data.results;; } }, mounted() { console.log("mounted") this.getMovieList(); } }; </script>