ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / vaultchip.com / platform / themes / wowy / assets / js / components

<template>
    <div class="container">
        <div class="heading-tab d-flex">
            <div class="heading-tab-left wow fadeIn animated">
                <h3 class="section-title mb-35">{{ category.name }}</h3>
            </div>
            <div class="heading-tab-right wow fadeIn animated">
                <ul class="nav nav-tabs right no-border" role="tablist">
                    <li class="nav-item" role="presentation" v-for="item in productCategories" :key="item.id">
                        <button :class="productCategory.id === item.id ? 'nav-link active': 'nav-link'" data-bs-toggle="tab" :data-bs-target="'#' + item.slug" type="button" role="tab" :aria-controls="item.slug" aria-selected="true" @click="getData(item)">{{ item.name }}</button>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="tab-content wow fadeIn animated">
            <div class="half-circle-spinner" v-if="isLoading">
                <div class="circle circle-1"></div>
                <div class="circle circle-2"></div>
            </div>

mounted() {
            if (this.category) {
                this.productCategory = this.category;
                this.productCategories = this.children;
                this.getData(this.productCategory);
            }
        },

props: {
            category: {
                type: Object,
                default: () => {},
                required: true
            },
            children: {
                type: Array,
                default: () => [],
            },
            url: {
                type: String,
                default: () => null,
                required: true
            }
        },

methods: {
            getData(category) {
                this.productCategory = category;
                this.data = [];
                this.isLoading = true;
                axios.get(this.url + '?category_id=' + category.id)
                    .then(res => {
                        this.data = res.data.data ? res.data.data : [];
                        this.isLoading = false;
                    })
                    .catch(res => {
                        this.isLoading = false;
                        console.log(res);
                    });
            },
        },
    }
</script>

[-] FlashSaleProductsComponent.vue [edit]
[-] FeaturedProductsComponent.vue [edit]
[-] ProductCategoryProductsComponent.vue [edit]
[+] ..
[+] utils
[-] RelatedProductsComponent.vue [edit]
[-] ProductCollectionsComponent.vue [edit]
[-] FeaturedNewsComponent.vue [edit]
[-] FeaturedProductCategoriesComponent.vue [edit]
[-] ProductReviewsComponent.vue [edit]
[-] FeaturedBrandsComponent.vue [edit]