plaid/src/pages/RadioShows.vue

<template>
  <f7-page name="RadioShows">
    <img :src='Radio.logo' id='logo'/> 
    <f7-block-title>{{Radio.name}}</f7-block-title>
    <f7-block-header>{{Radio.description}}</f7-block-header>

    <div v-if='loading' strong class="text-align-center">
      <f7-preloader />
    </div>
    <f7-list v-else>
        <f7-list-item v-for='show in Radio.shows' :key='show.name' :title='show.name'
          :link='`/radio/${radioId}/shows/${show.name}`' :footer='show.description'/>
    </f7-list>
  </f7-page>    
</template>

<script>
import radiomanifest from '../js/radiomanifest'

export default {
  name: 'radio',
  data () {
    return {
      loading: true,
      radioId: null,
      radio: { name: '' },
      Radio: { }
    }
  },
  props: { f7route: Object, f7router: Object },
  async mounted () {
    this.radioId = this.f7route.params.radioName
    try {
      this.Radio = await radiomanifest.get(this.f7route.params.radioName)
      this.loading = false
    } catch (e) {
      console.error('le cose non vanno mai sempre bene!', e)
    }
  }
}

</script>
<style>
#logo {
  margin-left: 10px;
  max-width: 40px;
}
</style>