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

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

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

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

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

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

Vue custom search filter doesn't match with v-model value

vue.js

vuejs2

vue-cli-3