37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<main class="container mx-auto px-4 py-16">
|
|
<TemplatePageCategorySelection
|
|
v-if="!selectedCategory"
|
|
@category-selected="handleCategorySelect"
|
|
/>
|
|
|
|
<TemplatePageTemplateGrid
|
|
v-else
|
|
:id_category="selectedCategory.id"
|
|
:category="selectedCategory.nama"
|
|
@back="goBack"
|
|
/>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
// 1. Impor komponen anak yang Anda gunakan
|
|
import TemplatePageCategorySelection from '~/components/template-page/CategorySelection.vue'; // Pastikan path ini benar
|
|
import TemplatePageTemplateGrid from '~/components/template-page/TemplateGrid.vue'; // Pastikan path ini benar
|
|
|
|
// 2. State untuk menyimpan SELURUH OBJEK kategori yang dipilih
|
|
const selectedCategory = ref(null);
|
|
|
|
// Fungsi ini sekarang akan menerima seluruh objek { id, nama }
|
|
const handleCategorySelect = (categoryObject) => {
|
|
selectedCategory.value = categoryObject;
|
|
};
|
|
|
|
// Fungsi ini akan menangkap event 'back' dari TemplateGrid
|
|
const goBack = () => {
|
|
selectedCategory.value = null;
|
|
};
|
|
</script> |