z.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: [
                    {
                        "background_image": "http:\/\/fair.ria-virtual-fair.io\/tenancy\/assets\/images\/banner.jpg"
                    },
                    {
                        "heading": "This Week Events", "w_data": [
                            {
                                "id": 12,
                                "formatted_start_date": "Sat 25, Jul 2020 23:32:14 GMT"
                            }, {
                                "id": 10,
                                "formatted_start_date": "Thu 23, Jul 2020 15:30:31 GMT"
                            }, {
                                "id": 9,

                                "formatted_start_date": "Fri 24, Jul 2020 23:24:43 GMT"
                            }, {
                                "id": 3,

                                "formatted_start_date": "Thu 23, Jul 2020 00:00:00 GMT"
                            }]
                    },
                    {
                        "heading": "Next Week Events", "w_data": [
                            {
                                "id": 11,

                                "formatted_start_date": "Fri 31, Jul 2020 14:57:44 GMT"
                            }, {
                                "id": 5,

                                "formatted_start_date": "Sat 01, Aug 2020 05:46:15 GMT"
                            }, {
                                "id": 4,

                                "formatted_start_date": "Tue 04, Aug 2020 04:37:59 GMT"
                            }]
                    }, {
                        "heading": "Up-Coming Events", "w_data": [
                            {
                                "id": 13,
                                "formatted_start_date": "Fri 07, Aug 2020 11:22:28 GMT"
                            }, {
                                "id": 8,

                                "formatted_start_date": "Thu 13, Aug 2020 06:44:02 GMT"
                            }, {
                                "id": 7,

                                "formatted_start_date": "Tue 11, Aug 2020 17:11:49 GMT"
                            }, {
                                "id": 6,

                                "formatted_start_date": "Sat 15, Aug 2020 13:08:19 GMT"
                            }, {
                                "id": 1,

                                "formatted_start_date": "Tue 18, Aug 2020 00:00:00 GMT"
                            }]
                    }],
                loading: true
            }
        },

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


        mounted() {
            let _this = this;
            try {
                axios.get("http://fc7a16d66c13.ngrok.io/api/webinar/published/all").then(function (response) {
                    _this.setData(response);
                    console.log(_this.webinars);
                }).catch(function (e) {
                    console.log(e);
                });
            } catch (error) {
                console.log(error);
            }
        }
    };
</script>