Building the Real Application Chapter 5{{ movie.name }}
</v-btn>
</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>Here, we added a link to the title that will take the user to its corresponding detail page.
Let's add a page for the detailed view of the movie page where a logged-in user can go and
rate the movie. Create a file called Movie.vue inside the src/components directory and
add the following content:
<template>
<v-layout row wrap>
<v-flex xs4>
<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>
<h6 class="card-title">Rate this movie</h6>
<v-card-text>
{{ movie.description }}
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
import axios from 'axios';export default {
name: 'Movie',
data() {
return {