New-site/resources/views/Schedule.vue

<template>
    <v-sheet class="mt-5 mb-5 rounded-lg w-75">
        <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Расписание стримов</p>
        <v-skeleton-loader v-if="fetching" type="text" />
        <p v-else class="ma-5 text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
        <ScheduleTable/>
        <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Ссылочки</p>
        <Links/>
    </v-sheet>
</template>

<script>
import axios from "axios";
import ScheduleTable from "./Schedule/ScheduleTable.vue";
import Links from "./Schedule/Links.vue";

export default {
    name: "Schedule",
    components: {Links, ScheduleTable},
    data: () => ({
        dates: [],
        fetching: true
    }),
    methods: {
        parseDate(date){
            let dateArr = date.split("-");
            return dateArr[2] + "." + dateArr[1];
        },
        async getDates(){
            await axios
                .get('/api/v1/dates')
                .then(response => {
                    this.dates = response.data;
                    this.fetching = false;
                });
        }
    },
    mounted() {
        this.getDates();
    }
}
</script>

<style scoped>

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

</style>