Vue 过滤器 - 根据搜索输入返回对象

Question

I have this search input:

<input type="text" v-model="searchHero" placeholder="Search Hero">

And this "output" area:

<div class="item wrapper" v-for="hero in filterSearch">
  {{ hero.image }} <br>
  {{ hero.name }} <br>
  {{ hero.bookmark }} <br>
</div>

The idea is that the user searches a hero, and the output should show only the hero he is searching for. For example, if he starts typing Ir , the output area should show Iron Man and Iron Man2

This is the full vue js code:

new Vue({
  el: '#app',
  data: {
    searchHero: '',
    heroes: [
      { name: 'Spiderman', image: true, bookmark: 'Bookmarkhere' },
      { name: 'Hulk', image: true, bookmark: 'Bookmarkhere' },
      { name: 'Iron Man', image: true, bookmark: 'Bookmarkhere' },
      { name: 'Captain America', image: true, bookmark: 'Bookmarkhere' },
      { name: 'Iron Man2', image: true, bookmark: 'Bookmarkhere' }
    ]
  },
  computed: {
    filterSearch() {
      return this.heroes.filter( heroes => {
        return heroes.name.toLowerCase().includes(this.search.toLowerCase())
      })
    }
  }
});

I get the following error in the console:

[Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined" (found in )

I believe that the problem is with the filderSearch(), but I cannot see what.

Here is the entire jsfiddle: https://jsfiddle.net/prozik/no2uLgrd/

Note: Replace <div class="item wrapper" v-for="hero in filterSearch"> to

<div class="item wrapper" v-for="hero in heroes"> if you want to see all the heroes.

Answer 1

Your filter expression is a little off, try this

computed: {
  filterSearch() {
    return this.heroes.filter( hero => {
      return !this.searchHero ||
        hero.name.toLowerCase().indexOf(this.searchHero.toLowerCase()) > -1
  })
}

}

Note that javascript array filter passes in each item individually, one at a time (you have coded as if the whole list was passed in).

Also added !searchHero so that all are displayed when search is empty.

Here's the Fiddle

Answer 2

Parameter name heros needed to be hero.

filterSearch () {
  return this.heroes.filter(hero => {
    return hero.name.toLowerCase().includes(this.searchHero.toLowerCase())
  })
}

It's also advisable to add :key="hero.id" to your v-for loop in the template. Vue Cheat Sheet

Answer 3

I would do this.

much cleaner and readable code.

filterSearch() {
  return this.heroes.filter( hero => {
    return hero.name.toLowerCase().match(this.searchHero.toLowerCase())
  })
}

Let me know how it works. Good Luck!