Vue and vue-property-decorator. TS error in beforeRouteUpdate hook

Question

I'm writing application using Vue 2/typescript and vue-property-decorator. In my component I use beforeRouteEnter/beforeRouteUpdate hooks. My component has method findProjects, and I want to invoke this method in my beforeRouteUpdate hook.

My component:

import { Component, Vue, Mixins, Watch } from 'vue-property-decorator'
...
export default class ProjectSandboxTs extends Mixins(GlobalFilterMixin({})) {
  created() {...
  }

  clearInput() {...
  }

  findProjects() {
    const filter: IFilter = { ...this.modalFilterValues, ...this.filterValues }
    this.filterProjects(filter)
    this.displayProjects()
    this.isEmpty = this.filteredData.length === 0
  }

  filterProjects(filter: IFilter) {...
  }

But when I try to invoke component's method in my hook, I get typescript error: Property 'findProjects' does not exist on type 'Vue'

beforeRouteUpdate(to, from, next) {
  if (!isEqual(to.query, from.query)) {
    this.findProjects() // <== Property 'findProjects' does not exist on type 'Vue'
  }
  next()
}

Any ideas how to fix it?

Adam Orłowski · Accepted Answer · 2022-04-20 17:10:18Z

0

It is because typescript doesn't know what type of instance this is going to be. Try something like this:

(this as ProjectSandboxTs).findProjects()

answered Apr 20, 2022 at 17:10

Adam Orłowski

4,53226 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue and vue-property-decorator. TS error in beforeRouteUpdate hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related