0

Me encuentro llenando una lista utilizando v-fordicha lista es llenada mediante un objeto de objetos.

{
 id1:{
  descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci"
  imagen: "https://source.unsplash.com/random"
  nivel: 1
  nombre: "Carpinteria"
  recomendada: true
 },
 idcat1: {
  descripcion: "Lorem ipsum dolor sit amet, consectetu"
  imagen: "https://source.unsplash.com/random"
  nivel: 1
  nombre: "Arquitectura"
  recomendada: false
 }
}

el detalle es que dicha lista debe ser filtrada mediante la propiedad 'recomendada'. Es decir debo crear otro objeto de objetos pero que unicamente sean de la propiedad recomendada = true.

Lo realice directamente en el componente con v-if. Pero me sale un mensaje que de preferencia utilice una computed y que dicha computed devuelva el objeto de objetos ya filtrado y recorra ese objeto

Como sería dicha funcion, muchas gracias

0

2 respuestas 2

2

Opción 1

Tienes que crear una computed property y hacer el filtro de tu objeto y luego ese filtro recorrerlo.

Al objeto primero recorro sus keys, luego le hago un map y luego lo filtro. Es un poco complicado ya que es un objeto y filtrarlos no es tan sencillo.

Aquí te dejo el ejemplo de la computed property.

<script>
export default {
  name: "Loop",
  data() {
    return {
      items: {
        id1: {
          descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci",
          imagen: "https://source.unsplash.com/random",
          nivel: 1,
          nombre: "Carpinteria",
          recomendada: true
        },
        idcat1: {
          descripcion: "Lorem ipsum dolor sit amet, consectetu",
          imagen: "https://source.unsplash.com/random",
          nivel: 1,
          nombre: "Arquitectura",
          recomendada: false
        }
      }
    };
  },
  computed: {
    filteredList() {
      return Object.keys(this.items)
        .map(key => this.items[key])
        .filter(item => item.recomendada);
    }
  }
};
</script>

Luego en el template solo lo pintas de esta manera:

<template>
  <div>
    <li v-for="(item, index) in filteredList" :key="index">{{ item.nombre }}</li>
  </div>
</template>

Puedes ver el codigo funcionando en el siguiente enlace: https://codesandbox.io/s/computed-filter-object-lh7l7 El archivo se llama Loop.vue

Opción 2

Por otro lado tambien tienes la opcion mas sencilla que es filtrar tu objeto en el mismo template agregando un template extra de esta manera:

<template>
    <div>
        <template v-for="(item, index) in items">
            <li v-if="item.recomendada" :key="index">{{ item.nombre }}</li>
        </template>
    </div>
</template>

El error de vue se refiere a que no puedes filtrar directamente en la etiqueta que tiene el v-for. Pero si puedes filtrar en niveles interiores.

PD: En el codesandbox te he dejado las 2 opciones

0

Creo que si lo necesitas tener una variable con los objectos cargados, lo mas facil seria hacer un array de objetos que realice un push cada vez que recomendado sea true, y que luego puedas iterarlo en un v-for

let myObject = 
 {
 id1:{
  descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci",
  imagen: "https://source.unsplash.com/random",
  nivel: 1,
  nombre: "Carpinteria",
  recomendada: true
 },
 idcat1: {
  descripcion: "Lorem ipsum dolor sit amet, consectetu",
  imagen: "https://source.unsplash.com/random",
  nivel: 1,
  nombre: "Arquitectura",
  recomendada: false
 },
  id2:{
  descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci",
  imagen: "https://source.unsplash.com/random",
  nivel: 1,
  nombre: "Carpinteria",
  recomendada: true
 }
}

let newObject = [];

for(let item in myObject){
  if(myObject[item].recomendada){
    newObject.push(myObject[item]);
  }
};
  
console.log(newObject);

Tu Respuesta

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

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