Vue.js2のフィルターのthisについて

Question

--1の[this]は何をさしているのでしょうか？
また、変数の中身見るデバックの方法を教えていただきたいです。

<div id="app2"> <ul> <!-- val.price が入力された price よりも小さければ表示 --> <li v-for="val in list" v-show="val.price <= price"> {{ val.name }} {{ val.price }} 円 </li> </ul> <input v-model.number="inputprice" size="5"> 円以下の商品を表示 <!-- ボタンを押すと price が更新されて同時に結果も更新される --> <button @click="price = inputprice">click!</button> </div> //--------------- 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 } } })

Answer 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を用いた開発を効率化させよう！

Comments

[kazu_2017]

わかりやすい説明ありがとうございました。
これからも精進していきたいと思います。