Nuxt独自

【Nuxt.js】axiosで取得したデータをv-modelで検索しよう

前置き

検索機能の仕方をご紹介💫
ベースの検索と、
axiosで取得したデータを
inputに入力した値で
検索するパターンを記載していきます✍️

参考:
コピペでOK!Vue.jsでリアルタイム検索をつくる方法
.indexOf()で配列のindexが取得できないとき
Nuxt.js+Algoliaで全文検索可能なタスク管理アプリを実装するハンズオン!
【Vue.js】computedとmethodsを使った簡単な検索機能


簡単な検索機能

ポイント

computed

dataの値に
何かしらの処理を行えます。

indexOf(string)

指定されたString
最初に現れたインデックスを返します。
値がなければ-1を返します。

今回はkeywordを指定しているので
inputに入力した値があれば
それを返すようにしています🧸


コード

主にこちらのコードを使用しています。
コピペでOK!Vue.jsでリアルタイム検索をつくる方法

filterに変更してみます。


indexOfはStringのみなので…

idを指定して数字をつけても
Stringでなければ検索できません。
配列にすればOKだったりします。
.indexOf()で配列のindexが取得できないとき

ただ、配列でindex取得するとなると
0から始まるのがなんかモヤッとするので
文字列にしちゃうのが早いかも。
そうするとNumberで管理ができなくなって
不便ということもあるし、
そもそも数字で検索しなくて良い、
となるので不要かなと思いました💡


axiosで取得したJSONデータで検索

今回は使用しませんが、
Algoliaを使って実装するのも良さそうです。
Firebase Cloud Firestoreでも
使用できるみたいです💫

ベースのコード

まずはベース作り
取得・表示をして
検索用のinputを用意します🍀


完成コード

gettersにどうやって
filterをかけるのか確認👀
https://vuex.vuejs.org/ja/guide/getters.html

今回は①を採用しました。
見やすいようにtitleからのみ検索にしています。
①コンポーネント内のcomputed
 stateを直接呼び出してfilter
Vuex内のgettersfilter

ただ本来はstateを直接呼び出すことはないので
もっと綺麗なコードにできるかもしれません。
v-modelVuexに入れてしまえば良いのかも。
ここは今後試す必要がありそうです🤔💭

この辺りを参考にしています。
https://www.webopixel.net/javascript/1461.html
https://tenrakatsuno.com/programing-note/vue-js-search-vuex/


ここに至るまで

computed内で非同期通信できるのか試したもの。
サポートされていないようです。
Vue.jsのcomputedでのaxios通信

では非同期通信を
asyncData内でやろうとしたものの、
取得してきたデータをreturnで返して
それにcomputedfilterをかける…となると
データが二重?になって喧嘩するので、
これはfetchを使わねばならん!となりました。

⬇️fetchはreturnしない時に使用します。
【Nuxt.js】非同期通信まわりまとめ

fetchで取得したデータをstateに入れて
それを取得してv-modelの値でfilterをかける
一旦はそこで落ち着いたというわけです💫☝️


まとめ

stateの直接の呼び出しには
まだモヤッと感が残りますが、
やりたいこと自体は実装できました🙌✨

-Nuxt独自
-,

© 2021 aLiz Nuxt