Obtain the Vue Class Component Decorator's method within a Watcher

Question

Obtain the Vue Class Component Decorator's method within a Watcher

My question is similar to the ones raised in this and this GitHub issue, but unfortunately they were closed without a solution.

I am working with Vue and TypeScript using Vue Class Components. I need to access a method of my Vue class from inside a watcher defined in the @Component decorator. While I know how to access data using this.$data, I'm not sure how to access methods in this context.

Although my code works during runtime, it generates compilation errors and issues in Visual Studio Code ("Property 'clearInfo' does not exist on type 'Vue'.");

@Component({
  watch: {
    firstMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(1);   // this leads to errors
      else this.showMeshInfo(newMesh, 1);
    },
    secondMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(2);
      else this.showMeshInfo(newMesh, 2);
    },
  },
})


export default class Info extends Vue {
  clearInfo(whichMesh : number) {
...
  }

  showMeshInfo(mesh : any, index : number) {
    ....
  }


}

javascript typescript vue.js vue-class-components

Answer 1

Answer №1

There are two approaches you can take:

Include the watch functions in the class definition itself

// To begin, install vue-property-decorators using npm i -S vue-property-decorator
// This library offers useful decorators. More information can be found here: https://github.com/kaorun343/vue-property-decorator

import { Vue, Component, Watch } from 'vue-property-decorator'


@Component
export default class Info extends Vue {
  @Watch('firstMesh')
  public watchFirstMesh(newValue) {
     // ... perform necessary actions with newValue here
  }

  @Watch('secondMesh')
  public watchSecondMesh(newValue) {
     // ... perform necessary actions with newValue here
  }
}

Define the watches and methods within the options part of @Component

@Component({
  watch: {
    firstMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(1);   
      else this.showMeshInfo(newMesh, 1);
    },
    secondMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(2);
      else this.showMeshInfo(newMesh, 2);
    },
  },
  methods: {
   clearInfo(whichMesh : number) {
     ...
   },
   showMeshInfo(mesh : any, index : number) {
     ....
   }   
  }
})
export default class Info extends Vue {
  public clearInfo!: (wichMesh: number) => void;
  public showMeshInfo!: (mesh: any, index: number) => void;
}

Explanation

The detailed explanation can be found in the provided links
When defining options within the decorator @Component({...}), they are accessible when the class is instantiated. TypeScript might not infer all available elements automatically, so explicit declarations like
```
public clearInfo!: (whichMesh: number) => void;
```
are required to inform the compiler. For clarification on syntax, refer to the links provided below:

public clearInfo!: (whichMesh: number) => void;

The ! operator signifies non-null assertion. It indicates to the compiler that the expression cannot be null or undefined at that point.

The function signature (whichMesh: number) => void; denotes a function expecting a number argument (whichMesh) and returning void.

Non-null assertion in TypeScript Function signatures in TypeScript

Answer 2

There are two approaches you can take:

Include the watch functions in the class definition itself

// To begin, install vue-property-decorators using npm i -S vue-property-decorator
// This library offers useful decorators. More information can be found here: https://github.com/kaorun343/vue-property-decorator

import { Vue, Component, Watch } from 'vue-property-decorator'


@Component
export default class Info extends Vue {
  @Watch('firstMesh')
  public watchFirstMesh(newValue) {
     // ... perform necessary actions with newValue here
  }

  @Watch('secondMesh')
  public watchSecondMesh(newValue) {
     // ... perform necessary actions with newValue here
  }
}

Define the watches and methods within the options part of @Component

@Component({
  watch: {
    firstMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(1);   
      else this.showMeshInfo(newMesh, 1);
    },
    secondMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(2);
      else this.showMeshInfo(newMesh, 2);
    },
  },
  methods: {
   clearInfo(whichMesh : number) {
     ...
   },
   showMeshInfo(mesh : any, index : number) {
     ....
   }   
  }
})
export default class Info extends Vue {
  public clearInfo!: (wichMesh: number) => void;
  public showMeshInfo!: (mesh: any, index: number) => void;
}

Explanation

The detailed explanation can be found in the provided links
When defining options within the decorator @Component({...}), they are accessible when the class is instantiated. TypeScript might not infer all available elements automatically, so explicit declarations like
```
public clearInfo!: (whichMesh: number) => void;
```
are required to inform the compiler. For clarification on syntax, refer to the links provided below:

public clearInfo!: (whichMesh: number) => void;

The ! operator signifies non-null assertion. It indicates to the compiler that the expression cannot be null or undefined at that point.

The function signature (whichMesh: number) => void; denotes a function expecting a number argument (whichMesh) and returning void.

Non-null assertion in TypeScript Function signatures in TypeScript

Obtain the Vue Class Component Decorator's method within a Watcher

Answer №1

Similar questions

Launching a peek inside a modal using AngularJS through a service

I'm encountering an issue with automatically updating content on a webpage

An improved method for generating a jQuery selection

Combine functions from two objects that share the same properties into an array for each property

Recognition of the ng-click function in Ionic buttons can occasionally be unreliable

What is the process for including a checkbox with a label in Card Media?

Step-by-step guide on reading a text file in a Nuxt 3 project located within a specific

Animation not properly synced with Bootstrap 4 Dropdown hide event

A nested DragSource component within a parent DragSource component in React DnD

Using ReactJS to return a component from a function

Ways to grab the outermost element when a click event happens

Converting timestamps: Retrieve day, date, hour, minutes, etc. without utilizing the "new Date()" function

Receiving a "Undefined index" error while passing information to a PHP script via jQuery

Having difficulty installing npm on Mac m1 with Monterey operating system

Tips for keeping Fancybox from deleting the selected thumbnail

The issue of 'position: fixed' not properly functioning within the Materialize CSS modal

Issue with Bootstrap 4 nested collapse: "data-parent" attribute malfunctioning

Ensure that test cases in Angular2 include a line that covers conditions for returning values

Is there a way to determine if a collapsed navbar is currently open?

Is there a way to convert a JSON input object to a model class using TypeScript in a Node.js application?