title: VueJS this in lodash throttled method
body: <p>I am trying to throttle a method in my VueJS application. I tried the following at first: </p>
  
  <pre><code>export default {
      data () {
          return {
              foo: 'bar'
          }
      },
      methods: {
          doSomething () {
              console.log('olas')
          }
      },
      created () {
          _.throttle(this.doSomething,200)
      }
  }
  </code></pre>
  
  <p>But the <code>doSomething</code> method was just not fired: <a href="https://jsfiddle.net/z4peade0/" rel="noreferrer">https://jsfiddle.net/z4peade0/</a></p>
  
  <p>Then, I tried this:</p>
  
  <pre><code>export default {
      data () {
          return {
              foo: 'bar'
          }
      },
      methods: {
          doSomething: _.throttle( () =&gt; {
              console.log('olas')
          },200)
      },
      created () {
          this.doSomething()
      }
  }
  </code></pre>
  
  <p>And the functiong gets triggered: <a href="https://jsfiddle.net/z4peade0/1/" rel="noreferrer">https://jsfiddle.net/z4peade0/1/</a></p>
  
  <p>Problem is, I can't access the <code>foo</code> property inside the throttled method: </p>
  
  <pre><code>export default {
      data () {
          return {
              foo: 'bar'
          }
      },
      methods: {
          doSomething: _.throttle( () =&gt; {
              console.log(this.foo) // undefined
          },200)
      },
      created () {
          this.doSomething()
      }
  }
  </code></pre>
  
  <p>I tried to do something like:</p>
  
  <pre><code>const self = {
      ...
      methods: {
          doSomething: _.throttle( () =&gt; {
              console.log(self.foo) 
          },200)
      },
      ...
  }
  
  export default self
  </code></pre>
  
  <p>without success</p>
  
  <p><strong>How could I use lodash throttled method on a VueJS method, and using <code>this</code> context?</strong></p>