Пользовательский фильтр поиска Vue не соответствует значению v-модели

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

Вместо этого я бы использовал oldschool:

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