VueJS这在lodash节流方法中

Question

我试图在我的VueJS应用程序中限制一个方法.我首先尝试了以下内容:

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething () {
            console.log('olas')
        }
    },
    created () {
        _.throttle(this.doSomething,200)
    }
}

但该doSomething方法没有被解雇:https://jsfiddle.net/z4peade0/

然后,我尝试了这个:

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething: _.throttle( () => {
            console.log('olas')
        },200)
    },
    created () {
        this.doSomething()
    }
}

函数被触发:https://jsfiddle.net/z4peade0/1/

问题是,我无法访问foo限制方法内的属性:

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething: _.throttle( () => {
            console.log(this.foo) // undefined
        },200)
    },
    created () {
        this.doSomething()
    }
}

我尝试过这样的事情:

const self = {
    ...
    methods: {
        doSomething: _.throttle( () => {
            console.log(self.foo) 
        },200)
    },
    ...
}

export default self

没有成功

我如何在VueJS方法上使用lodash throttled方法,并使用this上下文？

Answer 1

你正在使用一个箭头函数,它绑定了错误的上下文(this).你应该使用普通的function:

    doSomething: _.throttle( function () {
        console.log('olas', this.foo);
    },200)