vuejs filterでv-forの出力を制御してみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

filterでv-forの出力を制御してみよう

Vue.js|2019年02月05日

2019年02月05日
  • このエントリーをはてなブックマークに追加

前回の延長で進めていきます。

v-forで商品リストの出力は出来ましたでしょうか?
今度は、商品から自分の「予算」で買えるものだけを出力します。

よくショッピングサイトで、予算を設定して検索する機能があります。
どれくらいお金を使うか設定して、予算内の商品だけ表示させる。
オンラインで買い物をするなら、非常に便利な機能です。

そんな時に使うのがfilterです。
Vue.jsにはfilterというすごく便利な機能があるんですね。
このfilterを使って、商品を絞り込んでみます。

今回のミッション

今回のミッションは、v-forで出力したデータを絞り込むことです。
inputフォームから金額を指定し、その金額内の商品だけを出力します。

ソースコードの解説を参考に、下記を再現してみてください。
一通りソースコードを理解してから取り組むと良いでしょう。
新しい書き方も出てくるので、いきなりだと難しいと思います。

どうしても動かなければ、下記からファイルをダウンロードしてみてください。
細かい箇所のチェックはエラーなど、見つけてみましょう。

なお、毎回ご提供するこちらはあくまでも、参考ファイルです。
より良い書き方を見つけたら、ご自身で改良してみてください。

ソースコードの解説

まずは、下記ソースコードに目を透してみましょう。
全体の流れを把握したら、すぐに自分で実践してみてください。

<div id="app">
    <!--v-modelでbudget(予算)をリアルタイムで変更可能にします-->
    <!--budget(予算)はscriptのbudgetと連動しています-->
    <input type="text" v-model="budget" />の中で買えるもの
    <ul>
        <!--bestproductsが最終的に選ばれた予算以下の商品のリストが入ります。-->
        <!--どうやって予算以下の商品を選んでいるのでしょう。-->
        <!--scriptを見てください。-->
        <!--v-bind:keyに表示されたデータのidを指定します。-->
        <!--v-bind:keyは、なるべく入れる必要があります。-->
        <li v-for="items in bestproducts" v-bind:key="bestproducts.id">{{items.product}}:{{items.price}}円</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            //最初budget(予算を設定します)
            budget : 10000,
            //アイテムのデータを一覧で持たせます。
            //この中のpriceを基準として表示する商品を選びます。
            items: [
                { id: 0,product:'最新のmac',price:9000 },
                { id: 1,product:'少し前のmac',price:8000 },
                { id: 2,product:'昔のmac',price:7000 },
                { id: 3,product:'ダメなmac',price:6000 },
                { id: 4,product:'壊れたmac',price:5000 },
            ]
        },
        //算出プロパティ「computed」はdataに変化があった時に起動します。
        computed:{
            //bestproductsの中に、絞り込まれた商品リストが入ります。
            bestproducts: function () {
                //ここでitemsリストを絞り込んで返します。
                //this.itemsでこの処理のitemsを呼び出します。
                //その後、filterでリストを絞り込みます。
                //引数としてel(リストの全データ)を渡し、関数内で使えるようにします。
                //elの文字は任意に変更できません。
                return this.items.filter(function (el) {
                    //データの中の価格が予算より少ないものを選んで絞り込みます。
                    //こうして出来上がったリストがbestproductsに格納されます。
                        return el.price <= this.budget
                }, this)
            }
        }
    })
</script>

なんとなく、流れはお分かり頂けたでしょうか。

ポイントは、算出プロパティ内の関数の書き方です。

itemなどはthisをつけて参照できます。
リストの中身はelをつけて参照します。

それさえ意識しておけば、あとは自由な条件で絞り込めます。
filterの中で色々な式を試して、カスタマイズしてみましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら