Add the click functionality for the detailed track info modal
This commit is contained in:
parent
aaa01acdd2
commit
aa9204fcfe
1 changed files with 9 additions and 1 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card" @click="show_track_info = true">
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<img
|
<img
|
||||||
v-if="item.album.images.length !== 0"
|
v-if="item.album.images.length !== 0"
|
||||||
|
|
@ -38,17 +38,24 @@
|
||||||
v-if="show_pop_modal"
|
v-if="show_pop_modal"
|
||||||
@close="show_pop_modal = false"
|
@close="show_pop_modal = false"
|
||||||
/>
|
/>
|
||||||
|
<TrackInfo
|
||||||
|
v-if="show_track_info"
|
||||||
|
:track="item"
|
||||||
|
@close="show_track_info = false"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Import Components
|
// Import Components
|
||||||
import PopularityModal from "../modals/PopularityInfo.vue";
|
import PopularityModal from "../modals/PopularityInfo.vue";
|
||||||
|
import DetailedTrackModal from "../modals/DetailedTrack.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: `TrackCard`,
|
name: `TrackCard`,
|
||||||
components: {
|
components: {
|
||||||
PopularityModal: PopularityModal,
|
PopularityModal: PopularityModal,
|
||||||
|
TrackInfo: DetailedTrackModal,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
item: {
|
item: {
|
||||||
|
|
@ -60,6 +67,7 @@ export default {
|
||||||
duration_tooltip: `Song Duration`,
|
duration_tooltip: `Song Duration`,
|
||||||
popularity_tooltip: `Song Popularity`,
|
popularity_tooltip: `Song Popularity`,
|
||||||
show_pop_modal: false,
|
show_pop_modal: false,
|
||||||
|
show_track_info: false,
|
||||||
}},
|
}},
|
||||||
computed: {
|
computed: {
|
||||||
duration() {
|
duration() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue