Vueで絞り込みとソート機能を実装してみた02
前回は絞り込み機能を実装したので今回はそれにソート機能を実装していきます。
前回:Vueで絞り込みとソート機能を実装してみた01
今回やること
* 降順と昇順を任意に表示切替できるようにする
ソートするにはcomputedのmatchedの返り値の配列を受け取ってそれをLodashを使ってソートしてから配列を返せば良いです。
この配列を既存のcomputedのlimitedで加工します。limitedの処理は前回と受け取る配列が違うだけです。
それでは実装していきます。
main.js
const app = new Vue({ el: "#app", data: { budjet: 10000, limit: 3, flg: false, list: [ { id: 1, name:"ザバス ホエイプロテイン100 ココア味", price: 3659 }, { id: 2, name:"ウイダー マッスルフィットプロテイン ココア味", price: 1922 }, { id: 3, name:"アミノバイタル アミノプロテイン レモン味", price: 3157 }, { id: 4, name:"パワープロダクション マックスロード チョコレート風味", price: 7980 }, { id: 5, name:"ゴールドスタンダード 100% ミルクチョコレート味", price: 4980 } ] }, computed: { matched: function() { return this.list.filter((el) => { return el.price <= this.budjet },this) }, sorted: function() { return _.orderBy(this.matched, 'price' this.flg ? 'desc' : 'asc') }, limited: function() { return this.sorted.slice(0, this.limit) } } })
sortedではLodashを使ってソート済みの配列を返しています。
色々なメソッドが揃ってます。使い方はドキュメントを参照してください。
Lodash Documentation
https://lodash.com/docs/4.17.10
index.htmlは以下のような感じにします。
<div id="app"> <p v-cloak> <input v-model.number="badjet">円以下に絞り込む<br> <input v-model.number="limit">件を表示する </p> <ul> <li v-for="item in list" :key="item.id"> 商品名:{{ item.name }}価格:{{ item.price }}円 </li> </ul> <button @click="flg=!flg">切り替え</button> </div>
これで切り替えボタンをクリックするごとにVueインスタンスのデータに持たせているflgプロパティのtrue/falseが切り替わり、
それによって降順/昇順が切り替わって表示されるようになります。
これでソート機能も追加することができました。
今回こちらの本を参考にさせていただいています。ありがとうございます!
基礎から学ぶ Vue.js
https://www.amazon.co.jp/dp/B07D9BYHMZ/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
読んでいただいてありがとうございました!!!