The this is undefined if used inside a debounce function

Question

For some reason the this is undefined if I'm using a debounce function. I have tried to bind it but still it is undefined. I can't understand what is happening here..

For example here this is working and returns

VueComponent {_uid: 6, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}

<template>
    <at-ta @at="fetchMembers">
        <textarea></textarea>
    </at-ta>  
</template>

fetchMembers(at)
{
    console.log(this) // <-- VueComponent { ...
},

But when I move it to a debounce function it isn't working anymore but is

this is undefined

fetchMembers: debounce(at => {
    axios.get(`/api/users?name=${at}`).then(({data}) => {
        this.members = data  // <-- this is undefined
    })
}, 500)

Use a function expression instead of an arrow function. See [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/q/34361379/218196). And then of course `debounce` must correctly "forward" the value of `this` to the wrapped function. — Felix Kling, Sep 23 '20 at 10:56

Decade Moon · Accepted Answer · 2020-09-23T11:02:38.340

3

Don't bind the debounced function, but do bind the axios promise callback.

methods: {
  fetchMembers: debounce(function (at) {
    axios.get(`/api/users?name=${at}`).then(({data}) => {
      this.members = data
    })
  }, 500)
}

It didn't work for you because you used a fat arrow function for the debounced function where this is undefined at that scope.

Keep in mind that you're only creating one debounced function that will be shared across all instances of your component. If this is an issue, you can instead wrap fetchMembers with a debounced function in the created hook:

created() {
  this.fetchMembers = _.debounce(this.fetchMembers, 500)
},

methods: {
  fetchMembers() {
    axios.get(`/api/users?name=${at}`).then(({data}) => {
      this.members = data
    })
  }
},

edited Sep 23 '20 at 11:02

answered Sep 23 '20 at 10:56

Decade Moon

32,968
8
81
101

1

When I switched to using async/await still getting undefined for this – Martin Zeltin Sep 23 '20 at 11:10
That's a different issue. You'll have to share your code or ask a new question. – Decade Moon Sep 23 '20 at 11:13
Actually I really like your approach of creating a debounce function in the ````created()```` hook. Now it even works for ````async/await````. – Martin Zeltin Sep 23 '20 at 11:17

The this is undefined if used inside a debounce function

1 Answers1