Свойство Computed определено в Vue Devtools, но недоступно для «this» в mount () hook - PullRequest
Новая
       11

Свойство Computed определено в Vue Devtools, но недоступно для «this» в mount () hook

0 голосов
/ 28 сентября 2019

Я использую вычисленное свойство для возврата параметров маршрута текущего пользовательского представления.Возвращаемое значение определяется в devtools, как вы можете видеть ниже, но когда я пытаюсь получить к нему доступ в своей функции mount () через console.log, оно возвращается как неопределенное.Я думал, что обертывание console.log в $ nextTick решит эту проблему, но это не так.У меня нет идей.

Снимок экрана DevTools

Мой код: 

  updated() {
    this.fetchGroupMessages();
  },
  mounted() {
    let listenerID = "UNIQUE_LISTENER_ID";
    this.$nextTick(() => {
      this.getUser();
      console.log(this.reservationId);
    });
  },
computed: {
    reservationId() {
      return this.$route.params.reservationId;
    }
  },

Для большего контекста я создаю приложение для чатаэто инициализируется в App.vue в хуке beforeCreated (), а затем пользователь проходит аутентификацию в хуке созданного ().Наконец, компонент Chat.vue визуализируется, если isLoggedIn == true.

РЕДАКТИРОВАТЬ: маршрут / URL 

export default {
    routes: [{
        path: "/admin",
        name: 'adminDashboard',
        component: AdminDashboard
    },
    {
        path: "/",
        name: "dashboard",
        component: Dashboard
    },
    {
        name: "bookings",
        path: "/bookings",
        component: Bookings
    },
    {
        path: "/reservation/:reservationId",
        children: [
            { path: "", component: Gallery },
            { path: "media/:mediaId", component: Media }
        ],
        component: Reservation
    },
    {
        name: "shopping-cart",
        path: "/bag",
        component: ShoppingCart
    },
    {
        name: "Thanks",
        path: "/thanks",
        component: Thanks
    }],
    add: function (component) {
        this.routes.push({
            path: component.path,
            children: component.children,
            name: component.name,
            component: component
        });
    }
...