En mi aplicación vue , quiero agregar un componente de búsqueda para poder buscar diferentes temas.
aquí hay un ejemplo de los datos:
persons: [ { name: 'Mr.X', gender: 'Male', location: { address: 'some streetname', zipcode: '12345', city: 'Berlin', lng: 'longitude', lat: 'latitude', }, skills: [ { label: 'foo' }, { label: 'bar' }, ], }, ...etc ]Luego, en mi componente, uso un valor calculado:
computed: { filteredList() { return this.persons.filter((person) => { return person.name.toLowerCase().includes(this.search.toLowerCase()) }) }, }el html es:
<input type="text" v-model="search" /> <div v-for="(person, index) in filteredList" :key="index"> <p>{{ person.name }}</p> </div>Esto, por supuesto, solo busca y devuelve el nombre. ¿Cómo puedo buscar en todas las propiedades? Por ejemplo, si busco "Berlín", también debería devolver los datos del objeto.
En primer lugar, debe formar una matriz que contenga todos sus valores primitivos y luego filtrarla.
Aquí está la función flatten() que coloca todos los valores de su estructura en la matriz plana
const persons = [ { name: 'Mr.X', gender: 'Male', location: { address: 'some streetname', zipcode: '12345', city: 'Berlin', lng: 'longitude', lat: 'latitude', }, skills: [ { label: 'foo' }, { label: 'bar' }, ], }, ] const flatten = (input) => { if (typeof input === 'object') { return (Array.isArray(input) ? input : Object.values(input)) .reduce((acc, x) => acc.concat(flatten(x)), []) } else { return [input] } } console.log(flatten(persons)) console.log(flatten(persons).includes('Berlin'))Si los resultados de su búsqueda se recuperan dinámicamente, recomendaría agregar la capacidad de filtrado al propio servicio y luego pasar esos filtros en la solicitud. Esto quita la carga del cliente y coloca la responsabilidad en su base de datos, que está mucho más optimizada para tal tarea.
Si debe ser completamente del lado del cliente, puede generalizar el filtro que tiene para realizar comparaciones en propiedades arbitrarias.
filteredList() { const filterObj = { 'name': 'Mr. X', 'gender': 'Female' }; return this.persons.filter((person) => { // For each of the filters defined in the filter object, determine if // the object passes the filter. Only take objects that pass all filters. let isMatch = Object.entries(filterObj).map(([key, value]) => { if (typeof value === 'string') return person[key].toLowerCase().includes(value); if (typeof value === 'boolean') return person[key] === value; // etc. }).every(i => i); return isMatch; }) },Si entiendo su requisito correctamente, desea filtrar con todas las propiedades anidadas que tiene en el objeto con la palabra clave de search .
Demostración de trabajo:
var vm = new Vue({ el: '#vue-instance', data: { persons: [ { name: 'Mr.X', gender: 'Male', location: { address: 'some streetname', zipcode: '12345', city: 'Berlin', lng: 'longitude', lat: 'latitude', } }, { name: 'Mrs.Y', gender: 'Female', location: { address: 'address 2', zipcode: '12345', city: 'alpha', lng: 'longitude', lat: 'latitude', } } ], search: '' }, computed: { filteredList() { return this.persons.filter((person) => { const computedObj = { ...person, address: person.location.address, zipcode: person.location.zipcode, city: person.location.city, lng: person.location.lng, lat: person.location.lat } return Object.keys(computedObj) .some(key => ('' + computedObj[key]).toLowerCase().includes(this.search.toLowerCase())) }) } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="vue-instance"> <input type="text" v-model="search" /> <div v-for="person in filteredList" :key="person.name"> <p>{{ person.name }}</p> </div> </div>