pagina de listas individuales

src/pages/ListasPage.vue

@@ -22,20 +22,21 @@
       v-for="lista in listas"
       :key="lista.id"
     >
-      <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
-        {{ lista.nombre
-        }}<q-icon
-          class="float-right cursor-pointer q-mt-xs"
-          name="delete"
-          @click="eliminarLista(lista)"
-        />
-        <q-badge
-          color="cyan-5"
-          text-color="black"
-          :label="lista.items.length"
-          class="float-right q-ma-sm"
-        />
-      </p>
+      <router-link :to="`/lista/${lista.id}`">
+        <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
+          {{ lista.nombre
+          }}<q-icon
+            class="float-right cursor-pointer q-mt-xs"
+            name="delete"
+            @click="eliminarLista(lista)"
+          />
+          <q-badge
+            color="cyan-5"
+            text-color="black"
+            :label="lista.items.length"
+            class="float-right q-ma-sm"
+          /></p
+      ></router-link>
     </div>
   </div>
 </template>

src/pages/listas/indexPage.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-for="item in items" :key="item.id">
+    <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
+      {{ item.nombre }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useListaStore } from "../../stores/lista.js";
+import { useRouter } from "vue-router";
+
+const listaStore = useListaStore();
+const $router = useRouter();
+
+const lista = ref(null);
+const items = ref(null);
+
+onMounted(async () => {
+  console.log($router.currentRoute.value.params.id);
+  lista.value = await listaStore.pb
+    .collection("lista")
+    .getOne($router.currentRoute.value.params.id);
+  const arrayIdItem = lista.value.items;
+  console.log(arrayIdItem);
+  items.value = await listaStore.pb.collection("items").getFullList();
+  items.value = items.value.filter(
+    (element) => arrayIdItem.indexOf(element.id) != -1
+  );
+});
+</script>

src/router/routes.js

@@ -13,6 +13,11 @@ const routes = [
         component: () => import("pages/IndexPage.vue"),
         meta: { auth: true },
       },
+      {
+        path: 'lista/:id',
+        component: () => import("pages/listas/indexPage.vue"),
+        meta: { auth: true },
+      },
     ],
   },
   {