Searchbar no funciona

M

Buenas,

Estoy realizando un proyecto en vue3 y estoy creando un searchbar para poder encontrar mejor las recetas del proyecto. Mi codigo es el siguiente:

App.vue

<template>
  <div id="app">
    <div class="header">
      <img class="logo" alt="UOC logo" src="./assets/uoc-logo.png" />
      <div class="app-name">Recipe book</div>
    </div>
    <search-bar @search="setSearchTerm" />
    <recipe-list :recipeList="filteredData" @delete-recipe="deleteRecipe" />
    <recipe-form
      v-if="showModal"
      @add-recipe="addRecipe"
      @close-modal="showModal = false"
    />
  </div>
</template>
<script>
import RecipeList from "./components/RecipeList.vue";
import RecipeForm from "./components/RecipeForm.vue";
import SearchBar from "./components/SearchBar.vue";
import { defineComponent } from "vue";
export default defineComponent({
  name: "App",
  components: {
    RecipeList: RecipeList,
    RecipeForm,
    SearchBar,
  },
  data: () => ({
    recipeList: [
      {
        id: 1,
        servings: 4,
        time: "30m",
        difficulty: "Easy",
        title: "Spaghetti",
        ingredients: ["noodles", "tomato sauce", "cheese"],
        directions: ["boil noodles", "cook noodles", "eat noodles"],
        imageUrl:
          "https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=face&w=2000&h=1000&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F21%2F2018%2F02%2F14%2Frecetas-4115-spaghetti-boloesa-facil-2000.jpg",
      },
      {
        id: 2,
        servings: 2,
        time: "15m",
        difficulty: "Medium",
        title: "Pizza",
        ingredients: ["dough", "tomato sauce", "cheese"],
        directions: ["boil dough", "cook dough", "eat pizza"],
        imageUrl:
          "https://www.saborusa.com/wp-content/uploads/2019/10/Animate-a-disfrutar-una-deliciosa-pizza-de-salchicha-Foto-destacada.png",
        featured: true,
      },
      {
        id: 3,
        servings: 6,
        time: "1h",
        difficulty: "Hard",
        title: "Salad",
        ingredients: ["lettuce", "tomato", "cheese"],
        directions: ["cut lettuce", "cut tomato", "cut cheese"],
        imageUrl:
          "https://www.unileverfoodsolutions.es/dam/global-ufs/mcos/SPAIN/calcmenu/recipes/ES-recipes/In-Development/american-bbq-beef-salad/main-header.jpg",
      },
    ],
    showModal: false,
    recipesData: RecipeList,
    filteredData: RecipeList,
  }),
  methods: {
    deleteRecipe(id) {
      this.recipeList.splice(id, 1);
    },
    addRecipe(recipe) {
      this.recipeList.push(recipe);
    },
    toggleForm() {
      if (this.showModal === false) {
        this.showModal = true;
      }
    },
    setSearchTerm(value) {
      console.log(value);
      if (value && value.length > 0) {
        this.filteredData = this.recipesData.filter((i) => {
          const val = value.toLowerCase();
          const title = i.title && i.title.toLowerCase();
          if (val && title.indexOf(val) !== -1) {
            return true;
          }
          return false;
        });
      } else {
        this.filteredData = this.recipesData;
      }
    },
  },
});
</script>

SearchBar.vue

<template>
  <div class="search">
    <input
      type="text"
      placeholder="Search for a recipe"
      id="search"
      @change="search"
      v-model="searchText"
    />
    <button @click="clearSearch">Clear search</button>
    <button @click="showForm">Add a new recipe</button>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "SearchBar",
  data() {
    return { searchText: "" };
  },
  methods: {
    showForm() {
      console.log("show");
      this.$emit("show-form");
    },
    clearSearch() {
      this.clearInput = "";
    },
    search() {
      this.$emit("search", this.searchText);
    },
  },
});
</script>

El problema del codigo es que, al entrar a la web, no salen las recetas, solo salen si las busco directamente en el buscador. No acabo de encontrar donde puede estar el problema.

Cuando busco si que encuentra las recetas, pero solo aparecen si las busco. Si no pongo nada en la barra de busqueda, tendrian que aparecer todas y no funciona.

Gracias por la ayuda

rekyemm

Sin entender mucho js lo más probable es que estés mostrando la lista filtrada, que al iniciar estará vacía

1 respuesta
M

#2 Es lo mas seguro si......pero no acabo de ver como solucionarlo

Maiko

Este ejercicio me suena mucho a PEC 3 de cierta asignatura de la UOC que hay ahora mismo xD
Yo aun no he empezado con los ejercicios porque tengo otra entrega de otra asignatura antes, espero que no sea dificil.

1 respuesta
-Yepeto-

Prueba con el debugger a ver donde está entrando y donde no.

M

#4 no jodas! Creo que has acertado un poco.

Si quieres hablamos por privado, solo me falts esa parte

1
JuAn4k4

Al renderizar por primera vez el componente que tiene filterData y recipelist tienes que incializar sus valores.

Usuarios habituales