kaorun343 / vue-property-decorator

Vue.js and Property Decorator
MIT License
5.52k stars 380 forks source link

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

Open WORMSS opened 4 years ago

WORMSS commented 4 years ago

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.

jagged3dge commented 3 years ago

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.