Accessing the value of this within dragulaService.setOptions

Question

I define active in my class. I would like to access the value of active within my Dragula code. When I console.log my this.active I get undefined. It seems that at this point of my code this refers to my Dragula object and not the variables I have declared at the start of my class.

How can I access the value of active within my Dragula code?

export class GamePage {

  active = [];
  inactive = []; 

  constructor() {

    this.dragulaService.setOptions('drop-'+this.tableID, {
      revertOnSpill: true, 
      direction: 'horizontal',
      moves: (el, source, handle, sibling) => this.checkPlayerCanBeDragged(el.id),
      accepts: function (el, target, source, sibling) {

        console.log('inactive', this.inactive);

        return true;

      }      
    });  

  }

}

https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch — Jota.Toledo, Dec 16 '17 at 17:47

score 2 · Accepted Answer · answered Dec 16 '17 at 18:02

2

The scope of your "this" in the function is different from the one in the class. You need to bind the "this" either with Javascript's bind method or a callback:

function (el, target, source, sibling) {

    console.log('inactive', this.inactive);

    return true;

  }.bind(this);

or

   function (el, target, source, sibling, () => {

    console.log('inactive', this.inactive);

    return true;

  });

answered Dec 16 '17 at 18:02

seawave_23

1,169
2
12
23

That's great - I was reading through the comments that were made on my original question and trying to decipher what to do. Your suggestion works perfectly, thank you. – Chris Dec 16 '17 at 18:04

Accessing the value of this within dragulaService.setOptions

1 Answers1