Vueで絞り込みとソート機能を実装してみる01

Vueのcomputedとmethodsの違いがいまいち分からなかったので、computedを使って絞り込みとソート機能を実装してみます。

今回やること
* 商品のリストから自由に値段と絞り込み件数を指定して画面に表示する

次回やること
* 降順と昇順を任意に表示切替できるようにする

今回は規模がかなり小規模なのでルートのコンポーネントに全部まとめて書いていきます。
Vue.jsもダウンロードしたファイルを読ませて、ソート処理で使うLodashもCDNで読ませています。

それでは実装していきます。
main.js

const app = new Vue({
    el: "#app",
    data: {
        budjet: 10000,
        limit: 3,
        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)
        },
        limited: function() {
            return this.matched.slice(0, this.limit)
        }
    }
})

computedで2つの算出プロパティを定義しています。

matchedではfilterメソッドを使います。これで条件に満たない要素を削除し、新たな配列をreturnします。
filterメソッドについて

limitedではsliceメソッドを使います。フィルタリングされた配列の中から、sliceで指定した長さだけ切り抜いて配列をreturnします。
sliceメソッドについて


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>
</div>

以上で絞り込み機能の実装は完了しました。

今回こちらの本を参考にさせていただいています。ありがとうございます！
基礎から学ぶ Vue.js
https://www.amazon.co.jp/dp/B07D9BYHMZ/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

次回はこれにソート機能を加えていきます。

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