前回の延長で進めていきます。
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の中で色々な式を試して、カスタマイズしてみましょう。