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

オブジェクトのkeyの値だけフィルターで返す

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

new Vue({
  el: '#app',
  data: {
    players: [
      {
        "age": 24,
        "name": "Ryu"
      },
      {
        "age": 24,
        "name": "Ken"
      },
      {
        "age": 25,
        "name": "Guile"
      }
    ],
    filterText: ''
  },
  computed: {
    filterPlayers() {
      const reg = new RegExp(this.filterText, 'i')
      return this.players.filter(v => v.name.match(reg)).map(v => v.name)
    }
  }
})

元記事を表示する