0

Tengo un estado en pinia el cual tengo un arreglo vacio, hago una peticion y agrego los elementos que me regresa al arreglo con push, tengo un componente donde mando a llamar el arreglo con la informacion y la recorro usando v-for y muestro unas cards, en el componente donde recorro el array, tengo un par de botones para filtrar elementos del arreglo por un tipo, creo una funcion y le pago un type, y en los botones mando a llamar a esta funcion pasandole el parametro, en la funcion hago el filtro, para solo mostrar los que necesito. Pero como puedo filtrar elementos en el mismo arreglo con diferentes condiciones? en el original hago unas búsquedas, al arreglo original le hago el filtro y ahora el arreglo va tener solo los elementos filtrados, pero quiero hacer otro, pero con todos los elementos del arreglo, como puedo hacer esto?, lo soluciono creando otro arreglo donde tengo los elementos filtrados pero, hay forma de hacerlo en el mismo sin crear otro?

este es mi código donde creo el otro arreglo.

    <button
      class="d-flex align-items-center button-option cursor-pointer px-2"
      @click="filterByType('uno')"
    >Uno</button>
    
    <button
      class="d-flex align-items-center button-option cursor-pointer px-2"
      @click="filterByType('two')"
    >Two</button>
    
    <button
      class="d-flex align-items-center button-option cursor-pointer px-2"
      @click="filterByType('three')"
    >Three</button>
    
    <card
      v-for="(elem, n) in filtersArray"
      :key="`elem-${n}`"
      :elem="elem"
      class="mb-4"
    />



if (filtersArray.value.length === 0) {
  filtersArray.value = array
}

const filterByType = (type) => {
  filtersArray = array.filter((val) => val.type === type)
}
5
  • Yo no se mucho de vue, pero array.filter genera un nuevo array con los elementos filtrados... no será que estás sobreescribiendo el valor de filtersArray y ahi está el problema?
    – Pipe
    el 9 nov. 2022 a las 0:34
  • nada mas quiero usar el arreglo original array, cuando carga tiene todos los elementos, cuando filtra, solo los filtrados, pero si hago otro filtro, no lo hace porque pues no tiene elementos, solo los que se filtraron jeje
    – luis
    el 9 nov. 2022 a las 0:40
  • @luis Y así será. Es exactamente lo que expones con const filterByType. Podría usar propiedades computadas sin mutar el arreglo original.
    – ZeroCool
    el 9 nov. 2022 a las 1:10
  • si, es lo que tenia pensado, pero como pasaría el parámetro o si eso se puede en una computada, porque ahorita mando a llamar la funcion filterByType en cada botón donde paso el tipo, de ahí hago el filtro
    – luis
    el 9 nov. 2022 a las 1:47
  • Su comentario me da a entenderlo. Tendría usted la necesidad de usar otro array para los diferentes filtros debido a que necesita usarlo en la plantilla (en el v-for) y su filtro depende de un evento: @click en este caso. De otro modo mutara el array original y no puede lograr lo que busca.
    – ZeroCool
    el 10 nov. 2022 a las 0:51

1 respuesta 1

0

Luis,

la forma en que me imagino tu situación resuelta es usando una propiedad computada - como dice @mafu - y el filtro como dato de trabajo (que será reactivo).

las propiedades computada Vue las mantiene automáticamente actualizadas y en caché, siempre que cambie alguna de sus referencias.

yo uso typescript (si no lo hacés, podés quitarle los tipos, pero para responder creo que queda más claro).

esto es pseudo código;

<template>
  <!-- tu template -->
</template>

<script lang="ts">

export default defineComponent({
  data: () => ({
    // datos de entrada
    array: ref<ArrayItemType[]>([]),

    // datos de trabajo
    type: ref<string>(null),
  }),
  computed: {
    filtersArray: {
      if (this.type !== null) {
        return this.array.filter((val) => val.type === this.type)
      }
      // si no hay filtro, devuelvo todo
      return this.array;
    },
  },
  created() {
    // obtener el array del repositorio y...
    this.array.push(...arrayRepo);
  },
  methods: {
    filterByType(type: string) {
      this.type = type;
    },
  }
});

</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.