Question

这是我的代码：

<input type="text" v-model="searchInput">
<ul>
   <li v-for="(badge, index) in filterBadges" :key="index"></li>
</ul>

还有我的计算函数：

data() {
  return {
    searchInput: '',
    badges: [
      'JS', 'BitBucket'
    ]
  }
},
computed: {
  filterBadges() {
    return this.badges.filter((badge) => {
      return badge.match(this.searchInput)
    });
  }
}

当searchInput为空时，显示数组中的所有项目，但是当我键入与数组项目匹配的内容时，则显示为空数组。任何帮助将不胜感激。

Answer 1

字符串的match方法仅接受正则表达式：请参见mdn docs

我会改用老式的方式：

filterBadges() {
    return this.searchInput === '' ? 
        this.badges : 
        this.badges.filter(badge => badge.toLowerCase().indexOf(this.searchInput.toLowerCase()) > -1);
  }

Vue自定义搜索过滤器与v模型值不匹配

1 个答案: