t.vue

<template>
  <div class="container" style="margin-top:50px">
    <div v-for="weibnar in webinars" :key="weibnar.id">
      <h2 class="mt-5" v-if="loading">{{ weibnar.heading }}</h2>
      <div class="row">
        <div v-for="web in weibnar.w_data"
             :key="web.id" class="col-sm-4 col-md-2 col-lg-2 col-xxl-2 mt-3">

          <v-skeleton-loader
                  class="card h-100"
                  max-width="300"
                  :loading="loading"
                  v-show="loading"
                  type="card"></v-skeleton-loader>

          <div class="card h-100" v-if="!loading">
            <img
                    class="card-img-top"
                    src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17369a5ed01%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17369a5ed01%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2299.4140625%22%20y%3D%2296.2015625%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                    alt="Card image cap"
            />
            <div class="card-body">
              <p class="card-text text-danger">
                {{ web.start_date }}
              </p>
              <p class="card-text">{{ web.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- {{ webinars }} -->
  </div>
</template>

<script>
  //import axios from "axios";
  export default {
    data() {
      return {
        webinars: [{
          id:Math.random(),
          heading:'',
          w_data:[{
            id:Math.random(),
            start_date:(new Date()),
          },
            {
              id:Math.random(),
              start_date:(new Date()),

            },
            {
              id:Math.random(),
              start_date:(new Date()),

            },
            {
              id:Math.random(),
              start_date:(new Date()),

            }]
        }],
        loading: true
      };
    },

    methods: {
      setData(data) {
        this.webinars = data.data;
        this.loading = false;
      }
    },

    mounted(){
      setTimeout(()=>{
        let data={
          data:[
            {
              heading:'T',
              start_date:(new Date()),},
            {
              heading:'HELLO',
              start_date:(new Date()),
              w_data:[
                {
                  id:Math.random(),
                  start_date:(new Date()),

                }
              ]
            },
            {
              heading:'HELLO',
              start_date:(new Date()),
              w_data:[
                {
                  id:Math.random(),
                  start_date:(new Date()),

                }
              ]
            },
            {
              heading:'HELLO',
              start_date:(new Date()),
              w_data:[
                {
                  id:Math.random(),
                  start_date:(new Date()),

                }
              ]
            },
            {
              heading:'HELLO',
              start_date:(new Date()),
              w_data:[
                {
                  id:Math.random(),
                  start_date:(new Date()),

                }
              ]
            }
          ],

        };

        this.setData(data);
      },5000)
    },

    async beforeRouteEnter(to, from, next) {


      // try {
      //     const response = await axios.get("api/webinar/published/all");
      //     next(vm => vm.setData(response.data));
      // } catch (error) {
      //     console.log(error);
      // }
    }
  };
</script>