vue-property-decorator icon indicating copy to clipboard operation
vue-property-decorator copied to clipboard

@Ref seems to not add needed getters to 'this' context

Open WORMSS opened this issue 5 years ago • 1 comments

We are seeing a major difference between

@Ref()
private input?: HTMLInputElement;
private foo = {
  someFunction: () => this.input // this#1
};

// Here this#1 has access to foo as a getter, but not input. So when foo.someFunction() is called, it returns undefined; Not desireable

@Ref()
private input?: HTMLInputElement;
private foo = {
  someFunction: () => this.getInput(); // this#1
}
private getInput() {
  return this.input; // this#2
}

// Here this#1 has access to foo as a getter, getInput as a getter, but not input. // Here this#2 has access to foo as a getter, getInput as a getter, AND input as a getter. So when foo.someFunction() is called, it returns the input element as desired.

WORMSS avatar Jul 03 '20 15:07 WORMSS

I know it's late, but for future visitors:

This is the scoping caveat noted here in the docs for vue-class-component library that this repo depends on.

Basically, declare direct methods to allow for magic-binding of this within the method block to the component class's Vue instance.

jagged3dge avatar Jan 13 '21 07:01 jagged3dge