とあるWeb屋の備忘録

とあるWeb屋の備忘録。たまに雑記。

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

読んでいただいてありがとうございました!!!