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，以便在搜索为空时显示所有内容。

这里是Fiddle

Answer 2

参数名称中的英雄必须是英雄。

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

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

Answer 3

我会这样做。

更清晰易读的代码。

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

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

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

3 个答案: