Блог

поэтому в настоящее время я работаю над ионным веб-приложением с Vue и машинописным текстом. Прямо сейчас я пытаюсь получить текущий идентификатор, который анализируется по маршруту. Для этого я работал над наблюдателем:

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

Это сообщение об ошибке, которое я получаю:

 [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 | };
 

Я уже пробовал это с помощью обозначения обработчика, но это также не сработало. У кого-нибудь еще есть идея?

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

Передача немедленно: значение true в опции немедленно вызовет обратный вызов с текущим значением выражения

Чтобы включить вывод типов в компонентах, используйте Vue.extend() в экспортированном определении компонента:

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