Here is the breakdown of my folder structure:
https://i.sstatic.net/X2CHX.png
This showcases how the page appears:
https://i.sstatic.net/Zul87.jpg
I have successfully retrieved all the necessary data from props. However, I am struggling to comprehend how to create dynamic id pages. The goal is to generate dynamic ~/movies/_id pages by extracting ids from an array obtained from an API. These generated pages should only fetch the Title, image, and overview information from the API object. These are the challenges at hand.
Movies.vue serves as the parent page. movieComp is a component utilized for v-for looping in order to display a list of movies fetched from the API's array. Each movie entry contains a details button beneath it, meant to direct users to individual movie details pages based on their respective ids fetched from the API.
_id.vue represents the page where content should be displayed according to the id received from the API.
Below is the code snippet from movies.vue (parent):
<template>
<div class="flex flex-wrap min-h-full w-screen">
<movieComp v-for="result in movies.results"
:key="result.id"
:movie-title="result.original_title"
:base-img-path="result.poster_path"
:movie-id="result.id" />
</div>
</template>
<script>
import movieComp from '../components/movieComp.vue'
export default {
components: { movieComp },
data() {
return {
movies: [],
apiKey: "7ed6d2f608b8f66d8fd54d5f11c9e7d4",
baseURL: "http://api.themoviedb.org/3/discover/movie?api_key=7ed6d2f608b8f66d8fd54d5f11c9e7d4",
}
},
async fetch() {
this.movies = await fetch(
this.baseURL
).then(res => res.json())
console.log(this.movies)
},
methods: {
}
}
</script>
<style>
</style>
Next, we look at the code from movieComp (component, child):
<template>
<div class="flex flex-col bg-gray-100 p-2">
<h1 class="text-xl">{{movieTitle}}</h1>
<img :src="'https://image.tmdb.org/t/p/w300'+baseImgPath" alt="Image">
<nuxt-link :to="`/movies/${movieId}`" >Details</nuxt-link>
</div>
</template>
<script>
export default {
props: {
movieTitle: {
type: String,
default: "Title"
},
baseImgPath: {
type: String,
default: "/464N3J1i6L5SsazPmX9m3q1GiZ3.jpg"
},
movieId :{
default: 436969
}
},
data (){
return {
}
},
methods: {
}
}
</script>
<style>
</style>
Last but not least, let's examine the contents of _id.vue (located in the same pages folder as movies.vue):
<template>
<div>
<p>id is {{$route.params.id}}</p>
</div>
</template>
<script>
export default {
data() {
return {
movies: [],
apiKey: "7ed6d2f608b8f66d8fd54d5f11c9e7d4",
baseURL: "http://api.themoviedb.org/3/discover/movie?api_key=7ed6d2f608b8f66d8fd54d5f11c9e7d4",
}
},
async fetch() {
this.movies = await fetch(
this.baseURL
).then(res => res.json())
console.log(this.movies)
},
}
</script>
<style>
</style>
Lastly, the following is a sample of the object retrieved from the API through the fetch request:
{
page: 1,
results: [
{
...
},
{
...
},
// More entries here
{
...
}
],
total_pages: 500,
total_results: 10000
}