Vue 自定义搜索过滤器与 v-model 值不匹配答案

【问题标题】：Vue custom search filter doesn't match with v-model valueVue 自定义搜索过滤器与 v-model 值不匹配
【发布时间】：2019-01-27 21:56:10
【问题描述】：

这是我的代码：

<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 为空时显示数组中的所有项目，但是当我键入与数组项目匹配的内容时，它显示空数组。任何帮助将不胜感激。

【问题讨论】：

标签： vue.js vuejs2 vue-cli-3

【解决方案1】：

字符串上的匹配方法只接受正则表达式：见mdn docs

我会用老式的方式来代替：

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

【讨论】：