Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <template>
<div class="container">
<img
:src="'https://image.tmdb.org/t/p/original' + item.backdrop_path"
class="img-fluid"
/>
<h1 v-if="item.name">{{ item.name }}</h1>
<h1 else>{{ item.title }}</h1>
<p>{{ item.overview }}</p>
<div class="row">
<div class="col-4">
<img
id="poster"
:src="'https://image.tmdb.org/t/p/original' + item.poster_path"
class="img-thumbnail"
/>
</div>
<div class="col-8">
<ul class="list-group list-group-flush">
<li v-if="item.first_air_date" class="list-group-item">
<span class="font-weight-bolder">First air date:</span>
{{ item.first_air_date }}
</li>
<li v-if="item.release_date" class="list-group-item">
<span class="font-weight-bolder">Release date</span>
{{ item.release_date }}
</li>
<li class="list-group-item">
<span class="font-weight-bolder">Average rating:</span>
{{ item.vote_average }}
</li>
<li class="list-group-item">
<span class="font-weight-bolder">Number of votes:</span>
{{ item.vote_count }}
</li>
<li class="list-group-item">
<span class="font-weight-bolder">Home Page:</span>
<a :href="item.homepage">{{ item.homepage }}</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 text-center my-5">
<button type="button" class="btn btn-primary" @click="$router.go(-1)">
Back
</button>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Details',
props: {
id: Number,
media_type: String
},
computed: mapGetters({
item: 'getSingle'
}),
mounted() {
this.$store.dispatch('fetchItem', { type: this.media_type, id: this.id })
}
}
</script>
|