Ionic Vue is throwing an error indicating that a property is not found on the type '{ $route(currentRoute: any): void; }'

Question

Ionic Vue is throwing an error indicating that a property is not found on the type '{ $route(currentRoute: any): void; }'

Currently, I am developing an Ionic WebApp using Vue and TypeScript. My current task involves retrieving the current id parsed by the route. To achieve this, I have been working on a watcher:

export default {
      data() {
        return {
          productId: null,
        };
      },
      watch: {
        $route(currentRoute: any) {
          this.productId = currentRoute.params.id;
        },
      },
    };

However, I encountered the following error message:

[vue-cli-service] TS2339: Property 'productId' does not exist on type '{ $route(currentRoute: any): void; }'.
    [vue-cli-service]     14 |   watch: {
    [vue-cli-service]     15 |     $route(currentRoute: any) {
    [vue-cli-service]   > 16 |       this.productId = currentRoute.params.id;
    [vue-cli-service]        |            ^^^^^^^^^
    [vue-cli-service]     17 |     },
    [vue-cli-service]     18 |   },
    [vue-cli-service]     19 | };

I have already attempted using the handler notation without success. Does anyone else have a suggestion to resolve this issue?

typescript vue.js ionic-framework

Answer 1

Answer №1

  watch: {
    "this.$route.params.productId": {
      handler: function(val) {
        this.productId = val
        console.log(val);
      },
      // deep: true,
      immediate: true
    }
  },

By setting the immediate option to true, the callback will be triggered immediately with the current value of the expression.

Answer 2

  watch: {
    "this.$route.params.productId": {
      handler: function(val) {
        this.productId = val
        console.log(val);
      },
      // deep: true,
      immediate: true
    }
  },

By setting the immediate option to true, the callback will be triggered immediately with the current value of the expression.

Answer 3

Answer №2

To activate type inference in components, simply utilize Vue.extend() on the exported component definition:

import Vue from 'vue'
                    👇
export default Vue.extend({
  data() {
    return {
      productId: null,
    }
  },
  watch: {
    $route(currentRoute: any) {
      this.productId = currentRoute.params.id
    }
  }
})

Answer 4

To activate type inference in components, simply utilize Vue.extend() on the exported component definition:

import Vue from 'vue'
                    👇
export default Vue.extend({
  data() {
    return {
      productId: null,
    }
  },
  watch: {
    $route(currentRoute: any) {
      this.productId = currentRoute.params.id
    }
  }
})

Ionic Vue is throwing an error indicating that a property is not found on the type '{ $route(currentRoute: any): void; }'

Answer №1

Answer №2

Similar questions

The local storage gets wiped clean whenever I am using this.router.navigate

Vue3 Composition API: Issue with Computed Property not Refreshing

Is there a way to alphabetically sort V-Chips in Vuetify?

Utilize the "yaminncco/vue-sidebar-menu" package to customize the sidebar menu elements according to the user's role

Significance of v-slot directive with activator bound to the value of "on"

Different ways to categorize elements of Timeline using typescript

Activate the field once the input for the other field is completed

PrimeNG's p-table in Angular is not being recognized when using @ViewChild

The outcome of a promise is an undefined value

Combine all TypeScript enums into a single one

Parent component does not receive Vue.js $emit when multiple calls are made in rapid succession

What is the best way to access firebase information using vue and vuefire?

Experiencing a Typescript error when trying to access a property within a nested object

Acknowledgment Pop-up

The issue persists in Angular 5 and asp.net MVC where the ID number continues to increase despite being deleted

I want to know the most effective way to showcase particular information on a separate page using Angular

My HTML files are not recognizing the IONIC Property within their own objects

Only displaying the VUE slot when the content meets a certain criteria

Using Laravel to retrieve data from an API and display it with VueJS

Using TypeScript generics to create reusable type definitions for reducers