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

Question

我有这个搜索输入：

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

而这个“输出”区域：

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

这个想法是用户搜索一个英雄，输出应该只显示他正在搜索的英雄。 例如，如果他开始输入Ir ，则输出区域应显示Iron Man和Iron Man2

这是完整的 vue js 代码：

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())
      })
    }
  }
});

我在控制台中收到以下错误：

[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'toLowerCase'”（在 中找到）

我相信问题出在 filderSearch() 上，但我看不出是什么。

这是整个 jsfiddle： https ://jsfiddle.net/prozik/no2uLgrd/

注意：将<div class="item wrapper" v-for="hero in filterSearch">为

<div class="item wrapper" v-for="hero in heroes">如果您想查看所有英雄。

Answer 1

你的过滤表达式有点不对，试试这个

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

}

请注意，javascript 数组过滤器单独传入每个项目，一次一个（您已编码为好像传入了整个列表）。

还添加了!searchHero以便在搜索为空时显示所有内容。

这是小提琴

Answer 2

参数名称 heros 需要是 hero。

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

还建议将:key="hero.id"添加到模板中的 v-for 循环中。 Vue 备忘单

Answer 3

我会这样做。

更干净和可读的代码。

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

让我知道它是如何工作的。 祝你好运！