how to document this keyword in custom components with jsDoc?

Question

I'm using Vuejs inline template components where we register the component in a javascript file and the template in html.

the component looks something like this:

Vue.component('compare-benefits', {
  data() {
     // the "this" keyword in methods should refer to this object
     return {
        ...state,
        isLoading: false,
     }
  },
  methods: {
    getData() {
       // I want the "this" keyword here to reference the object return in data above 
       this.isLoading = true;
    }
  }
})

If you are not familiar with Vue, whats happening here is that Vue framework will bind the this keyword in your methods to the object you return from the data() method.

How do I use jsDoc here and tell it that the this keyword here is in fact referencing that object?

EDIT: Primary reason for using jsDoc is not to create documentation but rather to have intellisense and type checking in vscode using @ts-check

Answer 1

The this keyword in Vue framework is an object of type Vue. You can identify it by debugging your code within your getData method or any other method. Moreover, the Vue data are properties to this. I have uploaded a screenshot below for you to see it from an example of my own that I am currently working on:

As a result, your code after jsDoc usage will be like this:

Vue.component('compare-benefits', {
    data() {
        return {
            ...state,
            isLoading: false,
        }
    },
    methods: {
        /** @this Vue */
        getData() {
            this.isLoading = true;
        }
    }
})