rutas de navbar

src/layouts/MainLayout.vue

@@ -4,13 +4,7 @@
       <q-toolbar>
         <q-toolbar-title>
           {{ listaStore.pb.authStore.model.name }} -
-          {{
-            $router.currentRoute.value.path == "/"
-              ? "Listas"
-              : $router.currentRoute.value.path == "/perfil"
-              ? "Perfil"
-              : lista.nombre
-          }}
+          {{ lista }}
         </q-toolbar-title>
 
         <div>
@@ -26,18 +20,29 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, computed } from "vue";
 import { useListaStore } from "../stores/lista.js";
 import { useRouter } from "vue-router";
 
 const $router = useRouter();
 const listaStore = useListaStore();
 
-const lista = ref("");
-
-onMounted(async () => {
-  lista.value = await listaStore.pb
+const nombreLista = ref("");
+const cargarLista = async () => {
+  const result = await listaStore.pb
     .collection("lista")
-    .getOne($router.currentRoute.value.params.id);
+    .getOne($router.currentRoute.value.params.id, { $autoCancel: false });
+  nombreLista.value = result.nombre;
+};
+
+const lista = computed(() => {
+  if ($router.currentRoute.value.path == "/") {
+    return "Listas";
+  } else if ($router.currentRoute.value.path == "/perfil") {
+    return "Perfil";
+  } else if ($router.currentRoute.value.path.includes("/lista/")) {
+    cargarLista();
+    return nombreLista.value;
+  } else return "";
 });
 </script>

src/pages/listas/indexPage.vue

@@ -9,12 +9,15 @@
       />
     </div>
     <div class="col-10">
-      <div
-        class="flex flex-center bg-teal-7 q-ma-md cursor-pointer rounded-borders"
-      >
-        <h3 style="font-weight: 615">
-          {{ lista?.nombre }}
-        </h3>
+      <div class="q-ma-md rounded-borders">
+        <q-input
+          outlined
+          v-model="producto"
+          label="Item"
+          :rules="[
+            (val) => (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
+          ]"
+        />
       </div>
     </div>
   </div>
@@ -37,14 +40,13 @@ const $router = useRouter();
 
 const lista = ref(null);
 const items = ref(null);
+const producto = ref("");
 
 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