Javascript 如何解决未捕获类型错误：this.filters不是函数？（vue.js 2）

我的组件代码如下所示：

<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>

从“lodash”导入
导出默认值{
道具：[“搜索”，“分类]，
数据（）{
返回{
价格最低：''，
最大价格：''
}
},
计算：{
过滤器（数据）{
const price={min:this.price\u min，max:this.price\u max}
返回{q:this.search，category:this.category，sort:data，location:data，price}
},
},
方法：{
filterProduct:u.debounce（函数（数据=null）{
this.$store.dispatch（'getProducts'，this.filters（数据））
},500)
}
}

我的完整代码如下所示：

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

<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>

未捕获类型错误：this.filters不是函数

如何解决错误

    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）

返回一个函数，但这样做会丢失

此

的上下文

因此，我将您的debounce代码移动到一个方法中，该方法

。call

s使用

this

将debounce返回的函数回调设置为

vue component

实例

---

此外，

计算的

属性不能用作函数

this.filters（data）

因此仍然会给出类似的错误，因为它是一个属性，就像您可以在vue组件实例的

data

中创建的属性一样。使用方法。

我认为应该用以下方式声明：

过滤器：函数（数据）{…}

。computed创建一个数据属性，而不是用作函数。更像是一个数据属性，它根据一些其他变量进行计算。

location:data，price

这行是什么意思？所以我可以给你推荐一个替代品。@Alexandru Ionut Mihai，也是一样的。事实并非如此work@AmreshVenugopal，查看我的完整代码，它会出现新错误。错误：

uncaughttypeerror:无法读取未定义的属性“dispatch”

如果在错误之前

console.log（this）

，我想您会看到一个lodash实例。您需要将变量另存为

let self=this

，并在整个代码中使用self。如果您在dispatch@mosestoh最新的编辑应该可以正常工作。它没有获得正确的

此
上下文。它仍然会在控制台上显示错误。如果您尝试过？