Building the Real Application Chapter 5url: 'http://localhost:8081/movies',
})
.then((response) => {
this.movies = response.data.movies;
})
.catch(() => {
});
},
},
};
</script>This code calls a method when the page loads, which is defined in the mounted method.
The method fetches the movies using an axios request. Now we have pulled the data from
the server to the client. Now, we will use the vue directive to loop through these movies
and render in the home page. Replace the content of the tag with the
following code in Home.vue:
<template>
<v-layout row wrap>
<v-flex xs4 v-for="movie in movies" :key="movie._id">
<v-card>
<v-card-title primary-title>
<div>
<div class="headline">{{ movie.name }}</div>
<span class="grey--text">{{ movie.release_year }} ‧ {{
movie.genre }}</span>
</div>
</v-card-title>
<v-card-text>
{{ movie.description }}
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</template>
...