plaid/src/pages/Show.vue

<template>
  <f7-page name="show">

    <f7-preloader v-if='loading_meta' />
    <f7-block v-else>
        <f7-block-title>{{ShowBasicInfo.name}}</f7-block-title>
        <f7-block-header>{{Radio.name}}</f7-block-header>
    </f7-block>
    
    <f7-preloader v-if='loading' />
        <f7-list v-else>
<a @click="play(episode)" v-for='episode in Show.episodes' :key='episode.url' >
            <f7-list-item :title='episode.title'  :footer='episode.text' />
</a>
        </f7-list>

  </f7-page>    
</template>

<script>
import radiomanifest from '../js/radiomanifest'
import getPodcast from '../js/podcast'
import eventBus from '../js/eventBus'

export default {
  name: 'radio',
  data () {
    return {
      loading_meta: true,
      loading: true,
      radioId: null,
      showId: null,
      Show: null,
    }
  },
  props: { f7route: Object, f7router: Object },
  async mounted () {
    this.radioId = this.f7route.params.radioId
    this.showId = this.f7route.params.showId
    this.ShowBasicInfo = {}

    try {
      this.Radio = await radiomanifest.get(this.f7route.params.radioId)
      this.ShowBasicInfo = this.Radio.getShowByName(this.showId)
      this.loading_meta = false
      this.Show = await getPodcast(this.ShowBasicInfo.getFeed())
      console.log('Show =', this.Show)
      this.loading = false
    } catch (e) {
      console.error('le cose non vanno mai sempre bene!', e)
    }
  },
  methods: {
    play: function(episode) {
      eventBus.$emit('play:now', episode.enclosure.url)
    }
  }
}

</script>