Access vue data object from inside a forEach

Question

I have the below variable in my data:

 data: function () {
    return {
      myVariable: false,
    }
  }

How do I access this variable from with a looping function, like below?

  anArray.forEach(function(item) {
      this.myVariable = true; 
      // do something
  });

I get 'this' is undefinded as its looking in the current loop function, not the vuejs object.

MatWaligora · Accepted Answer · 2017-11-30 11:34:18Z

35

Use Arrow function so you don't create new scope within forEach loop and keep your this reference of your Vue component.

 anArray.forEach((item) => {
  this.myVariable = true; 
  // do something
});

answered Nov 30, 2017 at 11:34

MatWaligora

1,1971 gold badge12 silver badges15 bronze badges

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

Comments

Thomas Van der Veen · Accepted Answer · 2017-11-30 11:34:48Z

10

You could bind this to the scope of the function:

anArray.forEach(function(item) {
  this.myVariable = true; 
  // do something
}.bind(this));

Another is by using the arrow notation (I am not 100% sure):

anArray.forEach((item) => {
  this.myVariable = true; 
  // do something
});

answered Nov 30, 2017 at 11:34

3,2362 gold badges24 silver badges38 bronze badges

Just to confirm, the second one will work fine. I prefer it personally as it's neater thank having bind(this) everywhere.