Skip to content
Snippets Groups Projects
Commit 8a53592e authored by Bilel El Yaagoubi's avatar Bilel El Yaagoubi
Browse files

view Home

parent e2015710
Branches
No related tags found
1 merge request!5Draft: Front bilel
Pipeline #42326 passed
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<h1>Welcome to Your Vue.js App</h1>
<p>
<h1>Welcome to Movie Website</h1>
<!-- <p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank">Forum</a>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank">vue-router</a>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a>
</li>
<li>
<a href="https://github.com/vuejs/awesome-vue" target="_blank"
>awesome-vue</a
>
</li>
</ul>
<p>
<input
v-model="movieName"
placeholder="Type any movie here"
type="text"
/>
</p>
<div>Nom du film: {{ movieName }}</div> -->
<div class="parent">
<Movie
class="child"
:movie="movie"
v-for="movie in movies"
:key="movie.id"
/>
</div>
</div>
</template>
<script>
import axios from "axios";
import Movie from "@/components/Movie";
export default {
name: "Home",
components: {
Movie,
},
data: function () {
return {
movieName: "",
movies: [],
moviesLoadingError: "",
};
},
methods: {
fetchMovies: function () {
axios
.get(
`https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
)
.then((response) => {
// Do something if call succeeded
this.movies = response.data.results;
console.log(this.movies);
})
.catch((error) => {
// Do something if call failed
this.usersLoadingError = "An error occured while fetching movies.";
console.error(error);
});
},
fetchMoviesAsync: async function () {
try {
// Do something if call succeeded
const response = await axios.get(
`https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
);
await (this.movies = response.data.results);
console.log(this.movies);
} catch (error) {
// Do something if call failed
this.usersLoadingError = "An error occured while fetching movies.";
console.error(error);
}
},
},
created() {
console.log("Hello World");
this.fetchMoviesAsync();
},
};
</script>
......@@ -88,6 +87,17 @@ export default {
text-align: center;
}
.parent {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-evenly;
}
.child {
width: 20%;
}
h3 {
margin: 40px 0 0;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment