今朝は検索機能を実装したので、そのことについて振り返って行きます！
比較的簡単に出来た印象です。
目次
参考にしたもの
コピペで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)
})
}今回はこんな感じでした！
以上！
