Document improvement to `this` inside ComponentOptions

[sprhawk]

I'm using typescript + vue-class-component + vue-apollo.

And I have following code:

 18 import Vue from 'vue'
 19 import Component from 'vue-class-component'
 20
 21 import { UsbDisk, OnUsbdisksChanged } from "generated/graphql";
 22
 23 @Component({
 24   apollo: {
 25     $subscribe: {
 26       usbDisksChanged: {
 27         query: OnUsbdisksChanged,
 28         result({ data }: any) {
 29           let disks: UsbDisk[] = data.usbDisksChanged;
 33           Vue.set(this, 'usbdisks', disks); // <- this is VueComponent
 34         }
 36       },
 37     }
 38   }})
 39 export default class DisksPage extends Vue {
 55
 56   usbdisks: UsbDisk[] = [];
 57
 58   created() {
 59   }
 60 }

On line 33, the this is referenced to VueComponent, and when I want to change some value for my class component I cannot just use this to change data like normally inside a vue context, I need to use Vue.set to do that.

I guess this is a scope restriction of vue-class-component, but I think it would be better add some document on this to help developers

[MKhabrat]

Not sure, if anything's changed since the issue was raised, but I managed to use this just fine

@Component({
  apollo: {
    users: {
      query: GET_USERS_LIST,
      variables() { return this.listSettings.toQueryVariables(); },
      update(data) { return DomainObjectService.toClientObject(User, data.users.items); },
      result(result) { this.total = result.data.users.total; },
    }
  }
})
export default class UsersList extends Vue {
  listSettings = ...;
  users: User[] = [];
  total = 0;
}

But I still cannot use arrow functions, which makes the oneliners above look a bit cumbersome.

Is it possible to add an extra argument (e.g. vm) to callbacks like variables, update, and result, so that we can access the component data and methods inside these callbacks?

IMHO, this would look, much nicer:

@Component({
  apollo: {
    users: {
      query: GET_USERS_LIST,
      variables (vm) => vm.listSettings.toQueryVariables(),
      update: (data) => DomainObjectService.toClientObject(User, data.users.items),
      result: (result, vm) => vm.updateTotal(result),
    }
  }
})
export default class UsersList extends Vue {
  listSettings = ...;
  users: User[] = [];
  total = 0;

  updateTotal(result) {
    this.total = result.data.users.total;
  }
}