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.
users
yusuarios
usuarios
_.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