fix: layouts

bo/src/views/CategoryView.vue

@@ -3,8 +3,13 @@
         <div class="container mt-24">
             <div class="row">
                 <div class="col-12">
-                    <h1>Category</h1>
-                    {{ $route.params }}
+                    <h2 class="text-2xl">Category ID: {{ $route.params.category_id }}</h2>
+                    <div v-for="(p, i) in products" :key="i">
+                        <p>
+                            <span class="border-b-1 bg-red-100 px-4">{{ p.name }}</span>
+                            <span class="border-b-1 bg-red-100 px-4">{{ p.price }}</span>
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -15,7 +20,23 @@
 <script setup lang="ts">
 // import { useRoute } from 'vue-router';
 import Default from '@/layouts/default.vue';
+import { useCategoryStore } from '@/stores/category';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 // const route = useRoute()
 // console.log(route);
 
+const categoryStore = useCategoryStore()
+const route = useRoute()
+
+const products = ref([])
+
+watch(() => route.params, async (n) => {
+    categoryStore.setCategoryID(parseInt(n.category_id as string))
+    const res = await categoryStore.getCategoryProducts()
+    products.value = res
+
+}, { immediate: true })
+
+
 </script>