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