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/${encodeURIComponent(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 = decodeURIComponent(this.f7route.params.radioUrl);
    try {
      this.Radio = await radiomanifest.get(this.radioId);
      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>