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>Issue when trying to filter array in Vuejs?
I am able to render list of items, but issue is unable to filter the array file. I have taken v-model inside of my input search field, and then writing computed property to it, But still i am getting error
Can i use v-model inside of my search input and filter the data???
.filter() functionCheck the "Problems" tab to the right of the console at the bottom right:
Expected to return a value at the end of arrow function. (array-callback-return)The implementation looks like this:
const search_array = sortedArray.filter((items) => {
if (items.name.toLowerCase().indexOf(searchString) !== -1) {
return items
}
})
So the filter function would work like this:
const search_array = sortedArray.filter((item) => {
return item.name.toLowerCase().indexOf(searchString) !== -1;
});
You are supposed to return true if the item should be kept, not the item itself.
JavaScript will assume items is a true-ish value and that is valid code. It is just an eslint warning, but an important warning here.
See documentation of .filter():
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
You simply forgot to use the correct search value variable.
You named it filterValue in data, but index uses this.searchString.
So fixing this in the first line of index():
let searchString = this.filterValue
If you output {{ index }} in your template, you can see your filtered array in real time while typing.