data() { return { searchString: '', sortKey: 'name', checked: false, Item, items: [{ price: '1', name: 'mm' }, ], computed: { computedItems() { return this.items.map((item, index) => { item.key = `item_${index}` return item }) }, index: function() { let searchString = this.searchString let itemsClone = [...this.items] // Change added const sortedArray = itemsClone.sort((a, b) => { if (a[this.sortKey] < b[this.sortKey]) return -1 if (a[this.sortKey] > b[this.sortKey]) return 1 return 0 }) if (!searchString) { return sortedArray } else { searchString = searchString.trim().toLowerCase() const search_array = sortedArray.filter((items) => { if (items.name.toLowerCase().indexOf(searchString) !== -1) { return items } }) return search_array } } } <div class="wrapper"> <input type="text" v-model="searchString" placeholder="search items from here" /> <br /> <virtual-list class="list" style="height: 360px; overflow-y: auto" data-key="key" :keeps="20" :data-sources="computedItems" :data-component="Item" /> <hr /> </div>¿Problema al intentar filtrar la matriz en Vuejs?
Puedo representar la lista de elementos, pero el problema no puede filtrar el archivo de matriz. Tomé el modelo v dentro de mi campo de búsqueda de entrada y luego le escribí la propiedad calculada, pero aún recibo un error
¿Puedo usar v-model dentro de mi entrada de búsqueda y filtrar los datos?
.filter()Verifique la pestaña "Problemas" a la derecha de la consola en la parte inferior derecha:
Expected to return a value at the end of arrow function. (array-callback-return)La implementación se ve así:
const search_array = sortedArray.filter((items) => { if (items.name.toLowerCase().indexOf(searchString) !== -1) { return items } })Así que la función de filtro funcionaría así:
const search_array = sortedArray.filter((item) => { return item.name.toLowerCase().indexOf(searchString) !== -1; }); Se supone que debe devolver true si el elemento debe conservarse, no el elemento en sí.
JavaScript asumirá que los items son un valor verdadero y que es un código válido. Es solo una advertencia eslint, pero una advertencia importante aquí.
Consulte la documentación de .filter() :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Simplemente olvidó usar la variable de valor de búsqueda correcta.
Lo nombró filterValue en data, pero index usa this.searchString .
Entonces arreglando esto en la primera línea de index() :
let searchString = this.filterValue Si genera {{ index }} en su plantilla, puede ver su matriz filtrada en tiempo real mientras escribe.