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>

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

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. — nucleaR
– nucleaR, Commented Dec 3, 2021 at 13:49

Peter Pointer · Accepted Answer · 2021-12-03 14:30:45Z

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.

Pavan J · Accepted Answer · 2021-12-03 14:26:10Z

0

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))
},

edited Dec 3, 2021 at 14:26

answered Dec 3, 2021 at 14:19

Pavan J

3531 gold badge3 silver badges13 bronze badges

1 Comment

user17525310 Over a year ago

Thanks.it's working

Collectives™ on Stack Overflow

Issue when trying to filter array in Vuejs?

2 Answers 2

Check your `.filter()` function

Make your search work

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Check your .filter() function

Make your search work

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

Check your `.filter()` function