Use Vue "this" instance within Lodash function

Question

Using VueJS and importing Lodash therein. When using a lodash function such as _.forEach, this within the function body refers to the lodash instance. How do I make this to point to the Vue component's instance instead?

_.forEach(records, function(val)
            {
                if (this.max_records >0) // max_records is defined in data(), so this should be the cimponent instance
                {

                }

            });

Possible duplicate of How to access the correct `this` inside a callback? — thanksd
– thanksd, Commented Oct 5, 2017 at 15:12
thanks thanksd, but probably not. And may be too indepth a solution to this simple issue. @asemahle's solution solved it. — gthuo
– gthuo, Commented Oct 5, 2017 at 15:20
I believe this is the exact same problem and asemahle's solution is exactly one of the solutions in the accepted answer there. I would recommend reading through the post to get a better understanding of how the scope of this works in general. — thanksd
– thanksd, Commented Oct 5, 2017 at 15:24

asemahle · Accepted Answer · 2017-10-05 15:20:46Z

5

You can use an arrow function. The this value in an arrow function is fetched from the scope it sits inside, which in this case is the Vue component instance.

Example:

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  created() {
    // we use an arrow function, so that 'this' refers to the component
    _.forEach([1,2,3], (e) => {
      console.log(this.message + ' ' + e);
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<div id="app">
  <p>Look at the output in the console! We see that the correct "this" was used.</p>
</div>

edited Oct 5, 2017 at 15:20

answered Oct 5, 2017 at 15:11

asemahle

20.8k4 gold badges42 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use Vue "this" instance within Lodash function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related