VueJS is a lodash throttled method

I am trying to use a method in my VueJS application. First I tried the following:

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

But the method doSomethingjust didn't run: https://jsfiddle.net/z4peade0/

Then I tried this:

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

And the g function is activated: https://jsfiddle.net/z4peade0/1/

The problem is that I cannot access the property fooinside the throttled method:

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

I tried to do something like:

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

export default self

without success

How can I use the lodash method with throttling according to VueJS method and using context this?

+4
source share
1 answer

, (this). function:

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

Source: https://habr.com/ru/post/1672814/


All Articles