wazolab/ghibli-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create basic Person component + collect data by getter

Browse Source
This commit is contained in:
Noé Viricel
2020-12-21 22:05:53 +01:00
parent a9771243a1
commit 188625a413
4 changed files with 80 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
pages/films/_id.vue
View File

@@ -1,7 +1,9 @@
<template>
<div class="py-4 flex flex-col lg:flex-row items-center lg:items-start">
<div
class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
>
<article
class="mb-4 flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
class="mb-4 inline-flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
>
<header class="p-4 rounded-t-md">
<h1>
@@ -26,27 +28,33 @@
</section>
</article>
<aside class="w-full lg:ml-4">
<aside class="lg:inline-flex lg:ml-4">
<section
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
>
<h3 class="font-medium text-lg">People</h3>
<div>{{ film.people }}</div>
<h3 class="font-medium text-lg mb-4">People</h3>
<ul v-if="people.length">
<li :key="person.id" v-for="person in people">
<Person :person="person" />
</li>
</ul>
</section>
<section
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
<!-- <section
v-if="Object.keys(film.vehicles).length"
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
>
<h3 class="font-medium text-lg">Vehicles</h3>
<h3 class="font-medium text-lg mb-4">Vehicles</h3>
<div>{{ film.vehicles }}</div>
</section>
<section
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
v-if="Object.keys(film.locations).length"
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
>
<h3 class="font-medium text-lg">Locations</h3>
<div>{{ film.locations }}</div>
</section>
</section> -->
</aside>
</div>
</template>
@@ -56,6 +64,9 @@ import { mapGetters } from "vuex";
export default {
name: "Film",
components: {
Person: () => import("@/components/Person")
},
head() {
return {
titleTemplate: `%s - ${this.film.title}`
@@ -72,14 +83,12 @@ export default {
await store.dispatch("films/getFilm", params.id);
},
computed: {
people() {
return this.$store.getters["people/getPeopleByFilmId"](this.film.id);
},
...mapGetters({
film: "films/film"
})
},
async mounted() {
await this.$store.dispatch("films/getPeople");
await this.$store.dispatch("films/getVehicles");
await this.$store.dispatch("films/getLocations");
}
};
</script>