TMTApp/src/components/CourseMat.vue

<template>
  <ion-card :router-link="'/tabs/mat_detail/'+obj.id">
    <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" class="img_16_9"/>
    <ion-card-header>
      <ion-card-title>{{ name }}</ion-card-title>
    </ion-card-header>

    <ion-card-content class='ion-text-wrap'>
      {{ dt }}
    </ion-card-content>
  </ion-card>
</template>

<script setup lang="ts">
  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';
  import moment from 'moment'
import { getTrainers, listCourses } from '@/composable/settings';
  import { ref, onMounted  } from 'vue'

  const props = defineProps({
    obj: Object,
    courseName: String,
  })

  const dt = ref()
  const thmb = ref()
  const name = ref()

  onMounted(() => {
    console.log("--- onmounted ---")
    console.log("name === ", props.obj)
    const obj = props.obj
    let temp  = obj.display_datetime || obj.vimeo_created || obj.created_at 
    dt.value = moment(temp).format('LLL'); 

    if( obj.gifs && obj.gifs.length > 0 ) {
      console.log(obj.gifs)
      if(obj.gifs[0].sizes.length > 2 ) {
        thmb.value = obj.gifs[0].sizes[2].link
      }else {
        thmb.value = obj.gifs[0].sizes[0].link
      }
    }else {
      thmb.value = obj.course_image
    }
    name.value = obj.vimeo_name || props.courseName
  })
  
</script>

<style scoped>
#container {
  background-color:#f00;
}
ion-card-title {
  font-size:1.5em;
}
.img_16_9 {
  width:480px;
  height:270px;
  object-fit:cover;
}
</style>