Full-Stack Web Development with Vue.js and Node

(singke) #1
Building the Real Application Chapter 5

Modifying Home.vue to display dynamic content


Now, let's update our Home.vue, which will fetch the movies from our Mongo database


and display the dynamic content. Replace the code in Home.vue with the following content:


<template>
<v-layout row wrap>
<v-flex xs4>
<v-card>
<v-card-title primary-title>
<div>
<div class="headline">Batman vs Superman</div>
<span class="grey--text">2016 ‧ Science fiction film/Action
fiction ‧ 3h 3m</span>
</div>
</v-card-title>
<v-card-text>
It's been nearly two years since Superman's (Henry Cavill)
colossal battle with Zod (Michael Shannon) devastated the city of
Metropolis. The loss of life and collateral damage left many feeling angry
and helpless, including crime-fighting billionaire Bruce Wayne (Ben
Affleck). Convinced that Superman is now a threat to humanity, Batman
embarks on a personal vendetta to end his reign on Earth, while the
Free download pdf