Как решить 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.

Итак, я переместил ваш код дебюта внутри метода, который возвращает функцию обратного вызова функции debounce с this, установленную в экземпляре vue component.

Кроме того, computed свойства не должны использоваться в качестве функции. Таким образом, this.filters(data) будет по-прежнему давать аналогичную ошибку, так как это свойство, как и те, которые вы можете создать в data экземпляра компонента vue. Вместо этого используйте метод.