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

大文字・小文字が区別される。

<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() {
      return this.foods.filter(v => v.match(this.filterText))
    }
  }
});

元記事を表示する