Vuejsでリアルタイム検索

初めに

割と検索に苦手意識を持ってきたので実装を避けてきたのですが思ったより案外簡単にできたのでおいておきます。
環境

• Vuejs
• Bootstrap4
• Axios

HTML

<input type="text" placeholder="検索..." v-model="keyword">
<p v-for="user in filterUsers">
 {{ user.name }}
</p>

Vuejs

export default {
 data() {
  return {
   keyword: '',
  }
 },
 created() {
  this.getItems()
 },
 computed: {
  filterData() {
   var users = [];
   for (var i in this.users) {
    var user = this.users[i]
    // 配列とkeywordを比較して一致したら...
    if(user.name.indexOf(this.keyword) !== -1) {
     //配列にpushする。
     users.push(user)
    }
   }
   return users;
  }
 },
 methods: {
  getItems: function () {
   axios.get('/api/users').then(res => {
     this.users = res.data
   })
  }
 }
}

終わり

これで完成となっています。
ね？簡単でしょ？
リアルタイム検索なので前方、後方、部分、完全一致関係なく検索してくれます。
便利な世の中になった。