Uncaught TypeErrorを解決するには：this.filtersは関数ではありませんか？ （vue.js 2）

Question

マイコンポーネント・コードは次のようである：

<script> 
    import _ from 'lodash' 
    export default{ 
     props:['search','category'], 
     data(){ 
      return{ 
       price_min:'', 
       price_max:'' 
      } 
     }, 
     computed:{ 
      filters(data){ 
       const price = {min:this.price_min, max:this.price_max} 
       return {q:this.search, category:this.category, sort:data, location:data, price} 
      }, 
     }, 
     methods:{ 
      filterProduct: _.debounce(function(data=null){ 
        this.$store.dispatch('getProducts', this.filters(data)) 
      },500) 
     } 
    } 
</script> 

私の完全なコードは次のようである：http://pastebin.com/K7vwU0yY

実行されると、コンソール上でこのようなエラーが存在する：

Uncaught TypeError: this.filters is not a function

エラーを解決するにはどうすればよいですか？

Answer 1

computed:{ 
     filters(data) { // the first argument is supposed to be the `this` 
      const price = {min:this.price_min, max:this.price_max} 
      return {q:this.search, category:this.category, sort:data, location:data, price} 
     }, 
    }, 
    methods:{ 
     filterProduct (data = null) { 
      return _.debounce(function (data=null) => { 
      this.$store.dispatch('getProducts', this.filters(data)) 
      },500).call(this, data) 
     } 
    } 

匿名機能を使用すると、vueコンポーネントインスタンスのコンテキストが失われました。 矢印機能を使用するか、あなたの場合はlet self = this

にコンテキストを保存し、あなたが_.debounce(fn() {}, ms)を使用してそうすることによって機能を戻ってきている、あなたはthisにコンテキストを失いました。

.callのデバッグコードをthisでデバッグして戻した関数コールバックがvue componentインスタンスに設定されているメソッドの中にデバウンスコードを移動しました。

さらに、computedのプロパティを関数として使用することはできません。 this.filters(data)は、あなたのvueコンポーネントインスタンスのdataで作成できるものと同じように、プロパティであるのと同じようなエラーが表示されます。代わりに方法を使用してください。