如何解决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

执行时，在控制台上存在如下错误：

  

未捕获的TypeError：this.filters不是函数

如何解决错误？

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将debounce返回的函数回调设置为this vue component实例。

此外computed属性不能用作函数。因此，this.filters(data)仍将提供与属性类似的错误，就像您可以在vue组件实例的data中创建的那样。改为使用方法。