[英]Computed Property is defined in Vue Devtools, but not accessible by 'this' in mounted() hook
I use a computed property to return the route params of the current user view.我使用计算属性返回当前用户视图的路由参数。 The returned value is defined in devtools, as you can see below, but when I try to access it in my
mounted()
function via a console.log, it returns as undefined.返回值在 devtools 中定义,如下所示,但是当我尝试通过 console.log 在我的
mounted()
function 中访问它时,它返回为未定义。 I was thinking that wrapping the console.log in a $nextTick
would resolve this, but it doesn't.我在想将 console.log 包装在
$nextTick
中可以解决这个问题,但事实并非如此。 I'm out of ideas.我没主意了。
DevTools Screenshot:开发工具截图:
My code:我的代码:
updated() {
this.fetchGroupMessages();
},
mounted() {
let listenerID = "UNIQUE_LISTENER_ID";
this.$nextTick(() => {
this.getUser();
console.log(this.reservationId);
});
},
computed: {
reservationId() {
return this.$route.params.reservationId;
}
},
For more context, I'm building a chat app that gets initialized in App.vue
in its beforeCreated()
hook, and then the user is authenticated in the created()
hook.对于更多上下文,我正在构建一个聊天应用程序,该应用程序在
App.vue
的beforeCreated()
钩子中初始化,然后在created()
() 钩子中对用户进行身份验证。 Finally, the Chat.vue
component renders if isLoggedIn == true
.最后,如果
isLoggedIn == true
, Chat.vue
组件会渲染。
EDIT: The route/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
});
}
Make sure you pass router
into the Vue
configuration.确保将
router
传递到Vue
配置中。 That's what makes $route
reactive.这就是使
$route
反应的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.