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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

Below is my code

https://codesandbox.io/s/live-demo-virtual-list-forked-hwq38?file=/src/App.vue

Can i use v-model inside of my search input and filter the data???

CodePudding user response：

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

CodePudding user response：

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.