2

Tengo esa duda, el tema esta en que la documentación de VUE, no recomienda utilizar v-for y un v-if al mismo tiempo, recomienda que se utilice un metodo dentro de la propiedad "computed". El problema esta que los metodos que estan dentro de computed no son reactivos asi que no me funciona:

Aca les muestro un pequeño ejemplo de lo que digo:

<template>
 <div>
     <ul v-for="(user,index) in users" :key="user.id">
          <li>{{user.name}}
                 <button @click="hide(index)">Esconder</button>
         </li>
     </ul>
</div>

  <script>
  export default {
   props: {
    usuarios: Array
  },
    data (){
        return{
           usuarios:[
                  {id:1, nombre:"pepe",show:true},
                  {id:2, nombre:"kokun",show:true},
                  {id:3, nombre:"pepon",show:true},
                  {id:4, nombre:"pepona",show:true}
                  ],
          users: []
           }
   },
    methods:{
         hide(i){
              this.users[i]= {...this.users[i],show:false};
           }
      }
    computed: {
        return this.users= _.pickBy(this.usuarios,(a)=>{
                  return a.show;
                   })
   }
 }
 </script>

De esa lista que esta ahi solo tengo que mostrar dinamicamente los que son activos, usando _.pickBy(), si muestra los usuarios que en este caso estan activos, pero yo al mismo tiempo tengo un boton que al darle click cambio el estado de la variable show a falso, por lo que teoricamente no se tendria que ver.

8
  • 1
    observación: users y usuarios
    – fredyfx
    Commented el 29 jul. 2019 a las 20:52
  • No entiendo lo que dices. Commented el 29 jul. 2019 a las 21:05
  • 2
    Lee todo tu código detenidamente. Observación 2: falta coma en los objetos javascript dentro del arreglo usuarios
    – fredyfx
    Commented el 29 jul. 2019 a las 21:08
  • Entonces @fredyfx en este caso se le recomiendan las correcciones antes que cerrarla no?
    – user128299
    Commented el 29 jul. 2019 a las 21:20
  • Sucede que ese _.pickBy es de Lodash. Para reproducir una pregunta, la persona que publica debería al menos mencionar todo lo referente, le hace la vida más simple a quienes desees colaborar con la respuesta :D
    – fredyfx
    Commented el 29 jul. 2019 a las 21:27

1 respuesta 1

2

Antes que nada, me parece extraña la manera en la que utilizas computed. No soy un experto en Vue, pero creo que se tendría que quitar la propiedad users de data y declararlo como propiedad en computed:

...
    computed: {
        users: function(){
            return _.pickBy(this.usuarios,(a)=>{ return a.show;});
        }
    }
...

En cuanto al principal problema, es precisamente la reactividad de los objetos en users.

La solución completa sería la siguiente:

<ul v-for="(user,index) in users" v-bind:key="user.id">
    <li>{{user.nombre}}
        <button @click="hide(user)">Esconder</button>
    </li>
</ul>

Aquí itero utilizando la propiedad users de computed y paso el objeto user a la función hide cuando se realiza el click sobre el botón.

export default {
            props: {
                usuarios: Array
            },
            data (){
                return{
                    usuarios:[
                        {id:1, nombre:"pepe",show:true},
                        {id:2, nombre:"kokun",show:true},
                        {id:3, nombre:"pepon",show:true},
                        {id:4, nombre:"pepona",show:true}
                    ]
                }
            },
            methods:{
                hide(user){
                    // Simplemente se cambia a false su propiedad show
                    user.show = false;
                }
            },
            computed:{
                users: function(){
                    // Se obtienen los usuarios activos
                    var usuariosActivos = this.usuarios.filter((v)=>{return v.show; });
                    return usuariosActivos;
                }
            }
        }

Finalmente, en el método hide solamente se cambia la propiedad show del usuario a false y eso mantendrá la reactividad. Vale la pena mencionar que esto es posible gracias al v-bind:key que se utiliza después de v-for.

En computed solamente me dí la libertad de sustituir lodash y utilizar vanilla js.

Espero haberte ayudado, saludos.

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.