new Vue({ el:'#app', data:{ filtro_nombre:'', mexicano:false, usuarios:[ {nombre:'Jose', ciudad:'tamuin', pais:'mexico', color:'rojo'}, {nombre:'Albert', ciudad:'la chingada', pais:'españa', color:'amarillo'}, {nombre:'Antonio', ciudad:'tzinzunzan', pais:'alemania', color:'blanco'}, {nombre:'Manuel', ciudad:'tepic', pais:'mexico', color:'negro'}, {nombre:'Margarita', ciudad:'cedral', pais:'españa', color:'azul'}, ] }, computed:{ usuarios_filtrados(){ var this_ = this, usuarios = this_.usuarios; if(this_.filtro_nombre){ var nombre = this_.filtro_nombre.toLowerCase(); usuarios = usuarios.filter(function(item){ return item.nombre.toLowerCase().indexOf(nombre) > -1; }); } if(this_.mexicano){ usuarios = usuarios.filter(function(item){ return item.pais == 'mexico'; }); } return usuarios; } } });
<div id="app"> <input type="text" v-model="filtro_nombre"> <label><input type="checkbox" v-model="mexicano">Mexicano</label> <pre>{{ usuarios_filtrados }}</pre> </div>