Vue.jsでフォームに入力したテキストでフィルターをかけるサンプル2

大文字・小文字が区別されない。

<div id="app">
  <input v-model="filterText">
  <ul>
    <li v-for="food in filterFoods">{{ food }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    foods: ['Apple', 'Banana', 'Cookie'],
    filterText: ''
  },
  computed: {
    filterFoods() {
      const reg = new RegExp(this.filterText, 'i')
      return this.foods.filter(v => v.match(reg))
    }
  }
})

元記事を表示する