how to document this keyword in custom components with jsDoc?

user_9111239 0
Viewed 804

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

vue.js visual-studio-code typescript jsdoc intellisense
2 Answers

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:

enter image description here

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;
        }
    }
})
user_20523630

I don't know Vue.js. However, my knowledge of JSDoc might help you. 'this' keyword can be documented as follows

/**
 * @this Vue
 */

Here 'Vue' should be declared in JSDoc. You might be able to find it in Vue.js docs. You may look into this file for examples about creating classes, enums, functions, etc. and their usages in JSDoc.

user_51493270
Related