n.vue

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

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

                    <div class="card h-100" v-if="!loading">
                        <img
                                alt="Card image cap"
                                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"
                        />
                        <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() {
            let _this=this;
            try {
                axios.get("http://localhost:8001/t.php").then(function (response) {
                    _this.setData(response);
                }).catch(function (e) {
                    console.log(e);
                });
            } catch (error) {
                console.log(error);
            }
        }
    };
</script>