リアルタイム検索【Vue.js/Vuetify/Vuex】

概要

・　ポートフォリオでリアルタイム検索機能を実装したので、コメントつきのソースコードを紹介
・　使用した技術はVue.js,Vuetify,Vuex
　※ v-text-field のページは以下URL内にあり。
https://vuetifyjs.com/en/components/text-fields/#api
・　api経由でデータを取得し、ページネーション付きで表示する
・　開発環境はVue-Cli

template

<v-layout>
  <v-flex>
　　　//入力フォーム
     <v-text-field
     label="検索する"
     v-model="search">
     </v-text-field>
   </v-flex>
</v-layout>
<v-layout v-for="list in getLists" :key="list.index">
//以下にcomputedの「getLists」がループされて表示される
</v-layout>

computed内では、stateから取得したリストをgetListsで自分が入力した内容とマッチするリストになるようにフィルタリング。
フィルタリングしたリストをv-forループで表示させる。

script

data(){
 return : {
　　　//上記入力フォームの初期値
     search: "
  }
},
computed(){
  //stateの配列listsの中のオブジェクトから、キーtitleがv-modelで入力したsearchと一致するものだけ表示
  getLists(){
    const lists = this.$store.state.lists
      return lists.filter((list) => {
        return list.title.match(this.search)
     })
   }
}

store(state)

lists:
[
    {
     id: "akdddgela22nad", 
     title: "FreeTalk in NewYork",
     date: "2017-09-29",
     location: "New York"}
    { 
     id: "akdbbraa5ffggg", 
     title: "FreeTalk in Paris",
     date: "2017-10-20",
     location: "Paris"
    }
//以下省略...
],

下記のように" || "を使用すれば、リストの中のあらゆるワードや数字を拾って検索も可能になる。

script

return list.title.match(this.search) || list.date.match(this.search) || 
list.location.match(this.search)