質問: --1の[this]は何をさしているのでしょうか? また、変数の中身見るデバックの方法を教えていただきたいです。 {{ val.name }} {{ val.price }} 円 円以下の商品を表示 click! //--------------- new Vue({ el: '#app2', data: { price: 300, inputprice: 200, list: [{ name: 'とまと', price: 100 }, { name: 'れたす', price: 200 }, { name: 'きゅうり', price: 300 }] }, computed: { matchList: function() { console.log('matchList') // テストなので実行した時にログを残す // フィルターを使って price より小さいものだけの配列を作って返す return this.list.filter(function(val) { return val.price <= this.price }, this)//-------------------------------------------1 } } })
回答: ``` computed: { matchList: function() { console.log('matchList') // テストなので実行した時にログを残す // フィルターを使って price より小さいものだけの配列を作って返す return this.list.filter(function(val) { return val.price <= this.price }, this) //-------------------------------------------1 } } ``` 1にあるthisは MDN - Array.prototype.filter(callback[, thisArg])の第2引数[thisArg]で、 コールバック内でthisを用いるときに参照されるオブジェクトを指定するものです。 今回の例ではコールバック内では、 Vueの`data`プロパティの`price`を使用するためpriceを保持するVueインスタンス `this`を指定しています。 Vueのdataプロパティの値など見るのならば chrome,firefoxのエクステンションである Vue.js Devtools を入れると良いです。 Qiita- Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう!