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

【问题标题】：Vue filter - Return object depending on search inputVue过滤器 - 根据搜索输入返回对象
【发布时间】：2018-07-09 01:43:18
【问题描述】：

我有这个搜索输入：

<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">如果你想看到所有的英雄。

【问题讨论】：

标签： javascript filter vue.js vuejs2

【解决方案1】：

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

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

}

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

还添加了!searchHero，以便搜索为空时全部显示。

这是Fiddle

【讨论】：

我认为即使他称变量为英雄，他也将其视为一个单独的项目。可能是 !this.searchHero 修复了它。

【解决方案2】：

参数名称 heros 必须是 hero。

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

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

【讨论】：

能否展示一下使用includes() 解决问题的代码？
用包含方法更新了上面的帖子。
请不要在cmets中添加代码，使用edit post功能。
问题是您的代码示例与原始过滤器有何不同（除了变量名）？

【解决方案3】：

我会这样做。

更清晰易读的代码。

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

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

【讨论】：