Vue router.push: How to check if component or content is loaded?
0
As per all my post, I just want to make it known that I am still new to Laravel + VueJS, so please be as detailed as possible when posting your answers or comments. Thanks.
I am using Vue's router.push() to retrieve pages. Example code as follows:
editHandler(id) {
let self = this
self.$router.push({ name: 'inventory/Suppliers/Edit', params: { id }
})
}
I planned to add a loading overlay on the onClick event but I need help to check when the component/content has been loaded so that I can hide the loading overlay. Anyone can help me how I can achieve this? Thanks.
laravel vue.js nodes vue-router vuetify.js
edited Nov 14 '18 at 11:43
Husam Ibrahim
3,048415
asked Nov 14 '18 at 11:39
Allie SyadiqinAllie Syadiqin
93
|
show 2 more comments
0
As per all my post, I just want to make it known that I am still new to Laravel + VueJS, so please be as detailed as possible when posting your answers or comments. Thanks.
I am using Vue's router.push() to retrieve pages. Example code as follows:
editHandler(id) {
let self = this
self.$router.push({ name: 'inventory/Suppliers/Edit', params: { id }
})
}
I planned to add a loading overlay on the onClick event but I need help to check when the component/content has been loaded so that I can hide the loading overlay. Anyone can help me how I can achieve this? Thanks.
laravel vue.js nodes vue-router vuetify.js
edited Nov 14 '18 at 11:43
Husam Ibrahim
3,048415
asked Nov 14 '18 at 11:39
Allie SyadiqinAllie Syadiqin
93
router.beforeEach((to, from, next) => { next() })
– Hamilton Gabriel
Nov 14 '18 at 11:48
Can you provide me with a sample code based on what I posted above? Thanks.
– Allie Syadiqin
Nov 14 '18 at 12:25
Do you retrieve any data when you are opening that component based on that id?
– Niels Lucas
Nov 14 '18 at 14:24
Since you are new and still don't understand the concept of Vue/SPA. It's not a server-side load so it's pretty instantaneous. There is no need for loading overlay unless you're doing some ajax - per @NielsLucas question ref.
– Noogen
Nov 14 '18 at 16:44
In the example code above, the method push to a controller that does a database query and fetch data into the page. All I wanted to do was to be able to check if the result have been returned and hide the overlay. Sorry if I misunderstood what you are trying to tell me. As per Niels question, in the code example, it does use the ID to retrieve the data but there are instances where I may not use any ID, ie. listing all suppliers. Hope that is clear. Thanks.
– Allie Syadiqin
Nov 15 '18 at 5:09
|
show 2 more comments
0
0
0
As per all my post, I just want to make it known that I am still new to Laravel + VueJS, so please be as detailed as possible when posting your answers or comments. Thanks.
I am using Vue's router.push() to retrieve pages. Example code as follows:
editHandler(id) {
let self = this
self.$router.push({ name: 'inventory/Suppliers/Edit', params: { id }
})
}
I planned to add a loading overlay on the onClick event but I need help to check when the component/content has been loaded so that I can hide the loading overlay. Anyone can help me how I can achieve this? Thanks.
laravel vue.js nodes vue-router vuetify.js
edited Nov 14 '18 at 11:43
Husam Ibrahim
3,048415
asked Nov 14 '18 at 11:39
Allie SyadiqinAllie Syadiqin
93
As per all my post, I just want to make it known that I am still new to Laravel + VueJS, so please be as detailed as possible when posting your answers or comments. Thanks.
I am using Vue's router.push() to retrieve pages. Example code as follows:
editHandler(id) {
let self = this
self.$router.push({ name: 'inventory/Suppliers/Edit', params: { id }
})
}
I planned to add a loading overlay on the onClick event but I need help to check when the component/content has been loaded so that I can hide the loading overlay. Anyone can help me how I can achieve this? Thanks.
laravel vue.js nodes vue-router vuetify.js
laravel vue.js nodes vue-router vuetify.js
edited Nov 14 '18 at 11:43
Husam Ibrahim
3,048415
asked Nov 14 '18 at 11:39
Allie SyadiqinAllie Syadiqin
93
edited Nov 14 '18 at 11:43
Husam Ibrahim
3,048415
asked Nov 14 '18 at 11:39
Allie SyadiqinAllie Syadiqin
93
edited Nov 14 '18 at 11:43
Husam Ibrahim
3,048415
edited Nov 14 '18 at 11:43
Husam Ibrahim
3,048415
edited Nov 14 '18 at 11:43
Husam Ibrahim
3,048415
3,048415
asked Nov 14 '18 at 11:39
Allie SyadiqinAllie Syadiqin
93
asked Nov 14 '18 at 11:39
Allie SyadiqinAllie Syadiqin
93
asked Nov 14 '18 at 11:39
Allie SyadiqinAllie Syadiqin
93
93
router.beforeEach((to, from, next) => { next() })
– Hamilton Gabriel
Nov 14 '18 at 11:48
Can you provide me with a sample code based on what I posted above? Thanks.
– Allie Syadiqin
Nov 14 '18 at 12:25
Do you retrieve any data when you are opening that component based on that id?
– Niels Lucas
Nov 14 '18 at 14:24
Since you are new and still don't understand the concept of Vue/SPA. It's not a server-side load so it's pretty instantaneous. There is no need for loading overlay unless you're doing some ajax - per @NielsLucas question ref.
– Noogen
Nov 14 '18 at 16:44
In the example code above, the method push to a controller that does a database query and fetch data into the page. All I wanted to do was to be able to check if the result have been returned and hide the overlay. Sorry if I misunderstood what you are trying to tell me. As per Niels question, in the code example, it does use the ID to retrieve the data but there are instances where I may not use any ID, ie. listing all suppliers. Hope that is clear. Thanks.
– Allie Syadiqin
Nov 15 '18 at 5:09
|
show 2 more comments
router.beforeEach((to, from, next) => { next() })
– Hamilton Gabriel
Nov 14 '18 at 11:48
Can you provide me with a sample code based on what I posted above? Thanks.
– Allie Syadiqin
Nov 14 '18 at 12:25
Do you retrieve any data when you are opening that component based on that id?
– Niels Lucas
Nov 14 '18 at 14:24
Since you are new and still don't understand the concept of Vue/SPA. It's not a server-side load so it's pretty instantaneous. There is no need for loading overlay unless you're doing some ajax - per @NielsLucas question ref.
– Noogen
Nov 14 '18 at 16:44
In the example code above, the method push to a controller that does a database query and fetch data into the page. All I wanted to do was to be able to check if the result have been returned and hide the overlay. Sorry if I misunderstood what you are trying to tell me. As per Niels question, in the code example, it does use the ID to retrieve the data but there are instances where I may not use any ID, ie. listing all suppliers. Hope that is clear. Thanks.
– Allie Syadiqin
Nov 15 '18 at 5:09
router.beforeEach((to, from, next) => { next() })
– Hamilton Gabriel
Nov 14 '18 at 11:48
router.beforeEach((to, from, next) => { next() })
– Hamilton Gabriel
Nov 14 '18 at 11:48
Can you provide me with a sample code based on what I posted above? Thanks.
– Allie Syadiqin
Nov 14 '18 at 12:25
Can you provide me with a sample code based on what I posted above? Thanks.
– Allie Syadiqin
Nov 14 '18 at 12:25
Do you retrieve any data when you are opening that component based on that id?
– Niels Lucas
Nov 14 '18 at 14:24
Do you retrieve any data when you are opening that component based on that id?
– Niels Lucas
Nov 14 '18 at 14:24
Since you are new and still don't understand the concept of Vue/SPA. It's not a server-side load so it's pretty instantaneous. There is no need for loading overlay unless you're doing some ajax - per @NielsLucas question ref.
– Noogen
Nov 14 '18 at 16:44
Since you are new and still don't understand the concept of Vue/SPA. It's not a server-side load so it's pretty instantaneous. There is no need for loading overlay unless you're doing some ajax - per @NielsLucas question ref.
– Noogen
Nov 14 '18 at 16:44
In the example code above, the method push to a controller that does a database query and fetch data into the page. All I wanted to do was to be able to check if the result have been returned and hide the overlay. Sorry if I misunderstood what you are trying to tell me. As per Niels question, in the code example, it does use the ID to retrieve the data but there are instances where I may not use any ID, ie. listing all suppliers. Hope that is clear. Thanks.
– Allie Syadiqin
Nov 15 '18 at 5:09
In the example code above, the method push to a controller that does a database query and fetch data into the page. All I wanted to do was to be able to check if the result have been returned and hide the overlay. Sorry if I misunderstood what you are trying to tell me. As per Niels question, in the code example, it does use the ID to retrieve the data but there are instances where I may not use any ID, ie. listing all suppliers. Hope that is clear. Thanks.
– Allie Syadiqin
Nov 15 '18 at 5:09
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53299402%2fvue-router-push-how-to-check-if-component-or-content-is-loaded%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53299402%2fvue-router-push-how-to-check-if-component-or-content-is-loaded%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
router.beforeEach((to, from, next) => { next() })
– Hamilton Gabriel
Nov 14 '18 at 11:48
Can you provide me with a sample code based on what I posted above? Thanks.
– Allie Syadiqin
Nov 14 '18 at 12:25
Do you retrieve any data when you are opening that component based on that id?
– Niels Lucas
Nov 14 '18 at 14:24
Since you are new and still don't understand the concept of Vue/SPA. It's not a server-side load so it's pretty instantaneous. There is no need for loading overlay unless you're doing some ajax - per @NielsLucas question ref.
– Noogen
Nov 14 '18 at 16:44
In the example code above, the method push to a controller that does a database query and fetch data into the page. All I wanted to do was to be able to check if the result have been returned and hide the overlay. Sorry if I misunderstood what you are trying to tell me. As per Niels question, in the code example, it does use the ID to retrieve the data but there are instances where I may not use any ID, ie. listing all suppliers. Hope that is clear. Thanks.
– Allie Syadiqin
Nov 15 '18 at 5:09