如何解决 Uncaught TypeError: this.filters is not a function ？ (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

执行时，控制台出现如下错误：

未捕获的类型错误：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。

所以我将你的去抖代码移动到一个方法中，该方法.calls 是去抖返回的函数回调，this 设置为vue component 实例。

此外，computed 属性不能用作函数。 this.filters(data) 因此仍然会给出类似的错误，因为它是一个属性，就像您可以在 vue 组件实例的 data 中创建的错误一样。改用方法。