【Vue.js】filter関数でリストの中身を絞り込みたい

    <div id="app">
        <input type="text" v-model="budget" />の中で買えるもの
        <ul>
            <li v-for="item in bestproducts" v-bind:key="bestproducts.id">{{item.product}}:{{item.price}}円</li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
	var app = new Vue({
		el: '#app',
		data: {
                budget : 10000,
                
                item:[
                    {id:0,product:'最新のMac',price:9000},
                    {id:1,product:'中古のMac',price:19000},
                    {id:2,product:'ダメのMac',price:119000},
                    {id:3,product:'綺麗なMac',price:1119000},
                    ]
                },
            //算出プロパティ「computed」はdataに変化があった時に起動
                computed:{
                    bestproducts:function(){
                        // thisはappを、elはitemのリストの中身などを参照する
                        return this.item.filter(function(el){
                            return el.price <= this.budget;
                            },this);
                        }
                    }
        });
    </script>

参照

ログイン｜STARTOUT