crear item y guardar en la lista

src/pages/listas/indexPage.vue

@@ -14,6 +14,7 @@
           outlined
           v-model="producto"
           label="Item"
+          @keyup.enter="cargarProducto()"
           :rules="[
             (val) => (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
           ]"
@@ -23,7 +24,7 @@
   </div>
   <div v-for="item in items" :key="item.id">
     <p
-      class="bg-cyan-7 q-pa-md q-mx-md text-weight-bold text-h6 rounded-borders"
+      class="flex flex-center bg-cyan-7 q-pa-md q-mx-md text-weight-bold text-h6 rounded-borders"
     >
       {{ item.nombre }}
     </p>
@@ -42,13 +43,36 @@ const lista = ref(null);
 const items = ref(null);
 const producto = ref("");
 
+const cargarProducto = async () => {
+  if (producto.value.length >= 3) {
+    // Busca en todos, si no está crea y añade
+    const result = await listaStore.pb.collection("items").getFullList();
+    const busqueda = result.filter(
+      (element) => element.nombre == producto.value
+    );
+    if (busqueda.length == 0) {
+      const data = {
+        nombre: producto.value,
+        cantidad: 1,
+      };
+      await listaStore.pb.collection("items").create(data);
+      lista.value.items.push(data);
+      await listaStore.pb
+        .collection("lista")
+        .update(lista.value.id, lista.value);
+    }
+    // Si está, comprueba que no esté en la lista y lo añade
+    console.log(producto.value, busqueda);
+  }
+};
+
 onMounted(async () => {
   lista.value = await listaStore.pb
     .collection("lista")
     .getOne($router.currentRoute.value.params.id);
   const arrayIdItem = lista.value.items;
-  items.value = await listaStore.pb.collection("items").getFullList();
-  items.value = items.value.filter(
+  const result = await listaStore.pb.collection("items").getFullList();
+  items.value = result.filter(
     (element) => arrayIdItem.indexOf(element.id) != -1
   );
 });