Issue when trying to filter array in Vuejs?

Question

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???

• nucleaR: It seems like computed is part of the object returned from the data() function. You should place is so that the computed property is part of the Vue component.

Answer 1

Check your .filter() function

Check 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

Make your search work

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.

Answer 2

Updated sandbox with code to filter items based on inputs.

computedItems() {
 let initItems = this.items.map((item, index) => {
 item.key = `item_${index}`
 return item
 })
 return initItems.filter((item) => item.name.includes(this.filterValue))
},

• user17525310: Thanks.it's working