barra de busqeda

src/esteticas/nav.vue

@@ -104,6 +104,7 @@
               placeholder="Buscar"
               aria-label="Recipient's username"
               aria-describedby="basic-addon2"
+              v-model="nombre"
             />
             <div class="input-group-append reDer bg-white">
               <button class="btn  my-0" type="submit">
@@ -126,6 +127,18 @@
               </button>
             </div>
           </div>
+          <!-- <div>-->
+          <div v-if="nombre.length > 2">
+            <ul
+              class="list-group"
+              v-for="item in buscarLibro"
+              v-bind:key="item.idLibro"
+            >
+              <li class="list-group-item" @click="descripcion(item.idLibro)">
+                {{ item.titulo }}
+              </li>
+            </ul>
+          </div>
         </form>
       </nav>
     </div>
@@ -133,13 +146,25 @@
 </template>
 
 <script>
+import axios from "axios";
+import config from "../config/config.js";
 export default {
   data() {
     return {
-      isExist: true
+      isExist: true,
+      libros: [],
+      nombre: ""
     };
   },
   methods: {
+    async descripcion(idLibro) {
+      console.log(` Este es el id del libro ${idLibro}`);
+      localStorage.clear();
+      window.localStorage.setItem("idLibro", idLibro);
+      this.$router.push("/desc").catch(() => {
+        location.reload();
+      });
+    },
     inicio() {
       this.$router.push("/").catch(() => {
         location.reload();
@@ -147,10 +172,29 @@ export default {
     },
     async tema(categoria) {
       window.localStorage.setItem("categoria", categoria);
+      this.$router.push("/tema").catch(() => {
+        location.reload();
+      });
     },
     method() {
       this.isExist = !this.isExist;
     }
+  },
+  async created() {
+    let path = `${config.api}`;
+    try {
+      let libros = await axios.get(`${path}/getLibros`);
+      this.libros = await libros.data.data;
+    } catch (error) {
+      console.log(`Error ${error}`);
+    }
+  },
+  computed: {
+    buscarLibro: function() {
+      return this.libros.filter(item =>
+        item.titulo.toLowerCase().includes(this.nombre.toLowerCase())
+      );
+    }
   }
 };
 </script>
@@ -173,6 +217,11 @@ nav {
 .azulUnam {
   background-color: #1e3c70;
 }
+
+.list-group-item:hover {
+  background-color: #1e3c70;
+  color: white;
+}
 .doradoUnam {
   background-color: #bb8800;
 }