見出し画像

今朝は検索機能を実装したので、そのことについて振り返って行きます!

比較的簡単に出来た印象です。

目次

  1. 参考にしたもの
  2. 実装の手順
  3. まずはコードを
  4. キーコードについて
  5. 感想

参考にしたもの

コピペでOK!Vue.jsでリアルタイム検索をつくる方法 – console dot logblog.capilano-fw.com

下記は取得した値をどのように表示するのかに使いました。Vue.jsのv-forでの並び順を指定したキーの値順番にしたり、昇順、降順を切り替えたりするVue.jsで使用できるv-forは簡単にリストレンダリングできとても便利です。ただ、レンダリングの順番を指定したキーで並www.virment.com

実装の手順

まず検索するフォームを作成。ここに入力された値がv-modelを通して双方向バインディングをする。

記事一覧を取得する。今回はライフサイクルメソッドを使用しています。

入力された値を使って記事一覧の中に検索をかけ、値を取得。

その値をv-forを使って表示する、といった流れになっています。

まずはコードを

<template>
 <h3>検索してみる</h3>
 <input type="text" v-model="keyword" @keyup="key" placeholder="記事のタイトルを入力">
 <div v-for="post in posts" :key="post.id">
  <p>{{post.title}}</p>
 </div>
<・template>

<script>
export default {
 data() {
   return {
     keyword: '',
     keyup: false
   }
 },
 created() {
   this.$store.dispatch('getposts')
 },
 computed: {
   posts() {
     return this.$store.state.posts.filter(function(post) {
       if(this.keyup === true) {
         return post.title.indexOf(this.keyword) > -1
       }
     }, this)
   }
 },
 methods: {
   key() {
     if(event.key === 'Backspace' || event.key === 'Enter') {
       this.keyup = false
     } else {
       this.keyup = true
     }
   }
 }
}
</script>

ライフサイクルメソッドであるcreated()を使用してFirebaseに保存されている値を取得します。

computedでcreatedの処理で保存されているpost一覧を取得します。filterメソッドを使用して検索していきます。titleとthis.keywordが一致した場合に値を返すようになっています。

キーコードについて

keyupアクションにをinputに設定する事でキーコードによる不必要な挙動を制限しています。

今回はBackspaceとEnterが押された時にfalseにして、表示させない。という処理をしています。

dataに初期値を入れるのを忘れないように!

感想

比較的簡単に実装できるかと思います。今回はVuexの部分については深く触れていません(下にコード貼っておきます)が、何をfilterするかが大事ですね。

indexOfに出会った。

雑ですが、Vuexを使用している部分も載せておきます。

state
posts: []

mutations
get(state, posts) {
     state.posts = posts
   },

actions
getposts({commit}) {
     db.collection('posts').onSnapshot(snapshot => {
       let posts = []
       snapshot.forEach(element => {
         let post = element.data()
         post.id = element.id
         if(post.public === true) {
           posts.push(post)
         }
       });
       commit('get', posts)
     })
   }

今回はこんな感じでした!

以上!