2

mi problema es el siguiente: tengo un arreglo que lo traigo vía ajax y quisiera que ese arreglo pudiese filtrarse en mi lista pero, que cumpla una condición que es que el id === otroArreglo.id mis arreglos son estos: este es mi arreglo principal que tiene como nombre logros

 "id": 1,
"specifiers": "",
"name": "1x2",
"status": 1,
"isFavorite": false,

   },

  {
"id": 10,
"specifiers": "",
"name": "Doble oportunidad",
"status": 1,
"isFavorite": false,


},
{
"id": 11,
"specifiers": "",
"name": "Apuesta sin empate",
"status": 1,
"isFavorite": false,


 },

   {
    "id": 12,
    "specifiers": "",
    "name": "FC Toronto sin apuesta",
    "status": 1,
    "isFavorite": false,

  },

y este es mi arreglo donde tengo los id que quiero mostrar

SeleccionLogrosExtra:[{id:1}, {id:11}]

lo que que quiero hacer es una propiedad computada que me devuelva el arreglo principal pero solo los del id del segundo arreglo quiero hacer algo como esto

 GamesFilters: function () {
            let me=this;
            return logros.filter((e)=>{
                return e.id === me.SeleccionLogrosExtra.id;
            })
        },

1 respuesta 1

0

Podría implementar una doble función filter() para saber que elementos retornar, siempre y cuando el id del elemento iterado (e.id) esté contenido en el array seleccionLogrosExtra

No es necesario utilizar una variable temporal para la referencia si usa funciones flecha (arrow function)

El nombre de las variables se modificaron, cuidado con ese detalle, hay que mantener la convención de nombres para métodos y variables.

Vue.component('ejemplo-component', {
  data: function () {
    return {
      logros : [{
                "id": 1,
                "specifiers": "",
                "name": "1x2",
                "status": 1,
                "isFavorite": false
            },
            {
                "id": 10,
                "specifiers": "",
                "name": "Doble oportunidad",
                "status": 1,
                "isFavorite": false,
            },
            {
                "id": 11,
                "specifiers": "",
                "name": "Apuesta sin empate",
                "status": 1,
                "isFavorite": false,
            },
            {
                "id": 12,
                "specifiers": "",
                "name": "FC Toronto sin apuesta",
                "status": 1,
                "isFavorite": false,
            }
        ],
        seleccionLogrosExtra:[{id:1}, {id:11}]
    }
  },
  template:'Stack',
  computed: {
      gamesFilters: function () {
          return this.logros.filter((e)=>{
             // si existe el id en el array, el array retornado por filter debe ser mayor a 0
              return this.seleccionLogrosExtra.filter(el=> el.id === e.id).length > 0;
          })
      },
  },
  mounted() {
   console.log(this.gamesFilters);
  },
  template : '<p>El Resultado en Consola ;)</p>'
 
})

new Vue({ el: '#app' })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <ejemplo-component />
</div>

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.