request list

src/views/CollectionView.vue

@@ -1,31 +1,39 @@
 <script setup>
-
 import CollectionToolbar from '@/views/CollectionView/CollectionToolbar.vue'
 import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue'
+import { onMounted, ref } from 'vue'
+import { apiClient } from '@/services/apiClient.js'
+
+const merchList = ref(null)
+const loading = ref(true)
+const error = ref(null)
+
+const fetchMerch = async () => {
+  try {
+    const response = await apiClient.get('/merch/')
+    if (!response.ok) throw new Error('Network error')
+    merchList.value = await response.data
+  } catch (err) {
+    error.value = err.message
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchMerch()
+})
 </script>
 
 <template>
- <CollectionToolbar />
-  <n-grid
-    responsive="screen"
-    cols="2 s:3 m:4 l:5 xl:6 2xl:7"
-    class="grid-main"
-  >
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
-    <n-gi class="grid-item"><CollectionMerchCard /></n-gi>
+  <CollectionToolbar />
+  <n-grid responsive="screen" cols="2 s:3 m:4 l:5 xl:6 2xl:7" class="grid-main">
+    <n-gi class="grid-item" v-for="item in merchList" :key="item.merch_uuid">
+      <router-link :to="`/details/${item.merch_uuid}`" class="card-link">
+        <CollectionMerchCard :merch="item" />
+      </router-link>
+    </n-gi>
   </n-grid>
-
-
 </template>
 
 <style scoped>
@@ -36,4 +44,13 @@ import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue'
 .grid-main {
   margin: 10px auto;
 }
+
+.card-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+.card-link:hover {
+  text-decoration: none;
+}
 </style>

src/views/CollectionView/CollectionMerchCard.vue

@@ -1,9 +1,16 @@
-<script setup lang="ts">
+<script setup>
 import BoxIcon from '@/components/icons/BoxIcon.vue'
+
+defineProps({
+  merch: {
+    type: Object,
+    required: true,
+  }
+})
 </script>
 
 <template>
-  <n-card title="Card template" class="responsive-card">
+  <n-card :title="merch.name" class="responsive-card">
     <template #cover>
       <div class="cover-wrapper">
         <BoxIcon />
@@ -33,4 +40,5 @@ import BoxIcon from '@/components/icons/BoxIcon.vue'
   height: auto;
   max-width: 80%;
 }
+
 </style>