<template> <header> <div class="user"> <img class="photo" src="../assets/placeholder.jpeg" /> <br /> <div class="name"> <h1>Jeanne Dupont</h1> </div> </div> </header> <div class="like"> <h4 class="texte">Films que vous avez aimés ></h4> </div> <div class="likeList"> <div v-for="movie in likedFilms" :key="movie.id"> <p class="film"> <router-link :to="'/movie/'+ movie.id + '?uid=' + userId"><img :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" height="300" /> </router-link> </p> </div> </div> </template> <script> import axios from "axios"; const backendURL = process.env.VUE_APP_BACKEND_BASE_URL; export default { data: function () { return { likedFilms: [], userId: "", }; }, methods: { getLiked: async function () { try { const likedFilms = await axios.get( backendURL + "/users/likedMovies/" + this.userId ); return likedFilms.data; } catch (error) { console.log(error); } }, }, created() { this.userId = this.$route.query.uid; this.getLiked().then((results) => { console.log(results); this.likedFilms = results; }); console.log(this.userId); console.log(this.likedFilms); }, }; </script> <style scoped> .user { display: flex; justify-content: center; align-items: center; flex-direction: row; } .photo { width: 200px; height: 200px; border-radius: 100px; align-items: center; margin-right: 20px; margin-top: 10px; } .like { text-align: center; display: flex; background-color: #912f56; color: white; max-height: 100px; justify-content: center; max-width: 250px; border-radius: 10px; margin-left: 20px; } .texte { justify-items: flex-end; margin-left: 5px; } .name { background-color: #eaf2ef; } .likeList { display: flex; justify-content: space-around; flex-flow: row nowrap; } </style>