vue router.push : TypeError: onComplete is not a function
I am new to VueJS + Laravel after years using CodeIgniter and trying to understand how things work with Laravel + VueJS. Anyway, I got a test page running with a Vue Loading Layer package that triggers a loading overlay on the onClick event that loads a new page using router.push. I read the documentation that there is 2 additional parameters, ie. onComplete and onAbort for router.push and came up with the following method. Everything work as expected except that I am getting an error in the console.
console error
[vue-router] uncaught error during route navigation:
TypeError: onComplete is not a function
goto method
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
setTimeout(() => loader.hide(), 3 * 1000)
)
)
Even though I got the expected result, I still want to know why that error appears on the console.
Second, is there a better way of doing this? The only reason I used setTimeout() is the new page was loaded too fast for the loading overlay to be shown properly without setting the setTimeout().
Thank you for any help or tips.
laravel-5 vue.js
add a comment |
I am new to VueJS + Laravel after years using CodeIgniter and trying to understand how things work with Laravel + VueJS. Anyway, I got a test page running with a Vue Loading Layer package that triggers a loading overlay on the onClick event that loads a new page using router.push. I read the documentation that there is 2 additional parameters, ie. onComplete and onAbort for router.push and came up with the following method. Everything work as expected except that I am getting an error in the console.
console error
[vue-router] uncaught error during route navigation:
TypeError: onComplete is not a function
goto method
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
setTimeout(() => loader.hide(), 3 * 1000)
)
)
Even though I got the expected result, I still want to know why that error appears on the console.
Second, is there a better way of doing this? The only reason I used setTimeout() is the new page was loaded too fast for the loading overlay to be shown properly without setting the setTimeout().
Thank you for any help or tips.
laravel-5 vue.js
add a comment |
I am new to VueJS + Laravel after years using CodeIgniter and trying to understand how things work with Laravel + VueJS. Anyway, I got a test page running with a Vue Loading Layer package that triggers a loading overlay on the onClick event that loads a new page using router.push. I read the documentation that there is 2 additional parameters, ie. onComplete and onAbort for router.push and came up with the following method. Everything work as expected except that I am getting an error in the console.
console error
[vue-router] uncaught error during route navigation:
TypeError: onComplete is not a function
goto method
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
setTimeout(() => loader.hide(), 3 * 1000)
)
)
Even though I got the expected result, I still want to know why that error appears on the console.
Second, is there a better way of doing this? The only reason I used setTimeout() is the new page was loaded too fast for the loading overlay to be shown properly without setting the setTimeout().
Thank you for any help or tips.
laravel-5 vue.js
I am new to VueJS + Laravel after years using CodeIgniter and trying to understand how things work with Laravel + VueJS. Anyway, I got a test page running with a Vue Loading Layer package that triggers a loading overlay on the onClick event that loads a new page using router.push. I read the documentation that there is 2 additional parameters, ie. onComplete and onAbort for router.push and came up with the following method. Everything work as expected except that I am getting an error in the console.
console error
[vue-router] uncaught error during route navigation:
TypeError: onComplete is not a function
goto method
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
setTimeout(() => loader.hide(), 3 * 1000)
)
)
Even though I got the expected result, I still want to know why that error appears on the console.
Second, is there a better way of doing this? The only reason I used setTimeout() is the new page was loaded too fast for the loading overlay to be shown properly without setting the setTimeout().
Thank you for any help or tips.
laravel-5 vue.js
laravel-5 vue.js
edited Nov 14 '18 at 9:03
Traxo
4,89512148
4,89512148
asked Nov 14 '18 at 8:18
Allie SyadiqinAllie Syadiqin
93
93
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The second param to .push
expects a function, what you have passed is
setTimeout(() => loader.hide(), 3 * 1000)
which returns an integer, as you can read here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Return_value
To fix it, you can wrap it inside a function
() =>
setTimeout(() => loader.hide(), 3 * 1000)
So you goto
method will look like
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
() => setTimeout(() => loader.hide(), 3 * 1000)
)
)
Great. Work perfectly. I will accept this as the answer. However, the real purpose that I wanted was to trigger the loading overlay with the onClick event and then hide it after the new page has been loaded. Is there a better way of doing that? Thanks again.
– Allie Syadiqin
Nov 14 '18 at 8:50
@AllieSyadiqin The docs for vue-router shows this very well router.vuejs.org/guide/advanced/…
– Abhishek Gupta
Nov 15 '18 at 9:10
add a comment |
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
);
);
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%2f53295693%2fvue-router-push-typeerror-oncomplete-is-not-a-function%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The second param to .push
expects a function, what you have passed is
setTimeout(() => loader.hide(), 3 * 1000)
which returns an integer, as you can read here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Return_value
To fix it, you can wrap it inside a function
() =>
setTimeout(() => loader.hide(), 3 * 1000)
So you goto
method will look like
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
() => setTimeout(() => loader.hide(), 3 * 1000)
)
)
Great. Work perfectly. I will accept this as the answer. However, the real purpose that I wanted was to trigger the loading overlay with the onClick event and then hide it after the new page has been loaded. Is there a better way of doing that? Thanks again.
– Allie Syadiqin
Nov 14 '18 at 8:50
@AllieSyadiqin The docs for vue-router shows this very well router.vuejs.org/guide/advanced/…
– Abhishek Gupta
Nov 15 '18 at 9:10
add a comment |
The second param to .push
expects a function, what you have passed is
setTimeout(() => loader.hide(), 3 * 1000)
which returns an integer, as you can read here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Return_value
To fix it, you can wrap it inside a function
() =>
setTimeout(() => loader.hide(), 3 * 1000)
So you goto
method will look like
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
() => setTimeout(() => loader.hide(), 3 * 1000)
)
)
Great. Work perfectly. I will accept this as the answer. However, the real purpose that I wanted was to trigger the loading overlay with the onClick event and then hide it after the new page has been loaded. Is there a better way of doing that? Thanks again.
– Allie Syadiqin
Nov 14 '18 at 8:50
@AllieSyadiqin The docs for vue-router shows this very well router.vuejs.org/guide/advanced/…
– Abhishek Gupta
Nov 15 '18 at 9:10
add a comment |
The second param to .push
expects a function, what you have passed is
setTimeout(() => loader.hide(), 3 * 1000)
which returns an integer, as you can read here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Return_value
To fix it, you can wrap it inside a function
() =>
setTimeout(() => loader.hide(), 3 * 1000)
So you goto
method will look like
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
() => setTimeout(() => loader.hide(), 3 * 1000)
)
)
The second param to .push
expects a function, what you have passed is
setTimeout(() => loader.hide(), 3 * 1000)
which returns an integer, as you can read here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Return_value
To fix it, you can wrap it inside a function
() =>
setTimeout(() => loader.hide(), 3 * 1000)
So you goto
method will look like
goTo(routeName)
let self = this
self.$nextTick( function()
// Show Vue Loading Layer
let loader = this.$loading.show(
loader: 'spinner',
color: '#e8b30f',
backgroundColor: '#000',
opacity: 0.5,
)
// Retrieve new page
self.$router.push(
// First param : location
name: routeName,
// Second param : onComplete
() => setTimeout(() => loader.hide(), 3 * 1000)
)
)
answered Nov 14 '18 at 8:34
Abhishek GuptaAbhishek Gupta
974823
974823
Great. Work perfectly. I will accept this as the answer. However, the real purpose that I wanted was to trigger the loading overlay with the onClick event and then hide it after the new page has been loaded. Is there a better way of doing that? Thanks again.
– Allie Syadiqin
Nov 14 '18 at 8:50
@AllieSyadiqin The docs for vue-router shows this very well router.vuejs.org/guide/advanced/…
– Abhishek Gupta
Nov 15 '18 at 9:10
add a comment |
Great. Work perfectly. I will accept this as the answer. However, the real purpose that I wanted was to trigger the loading overlay with the onClick event and then hide it after the new page has been loaded. Is there a better way of doing that? Thanks again.
– Allie Syadiqin
Nov 14 '18 at 8:50
@AllieSyadiqin The docs for vue-router shows this very well router.vuejs.org/guide/advanced/…
– Abhishek Gupta
Nov 15 '18 at 9:10
Great. Work perfectly. I will accept this as the answer. However, the real purpose that I wanted was to trigger the loading overlay with the onClick event and then hide it after the new page has been loaded. Is there a better way of doing that? Thanks again.
– Allie Syadiqin
Nov 14 '18 at 8:50
Great. Work perfectly. I will accept this as the answer. However, the real purpose that I wanted was to trigger the loading overlay with the onClick event and then hide it after the new page has been loaded. Is there a better way of doing that? Thanks again.
– Allie Syadiqin
Nov 14 '18 at 8:50
@AllieSyadiqin The docs for vue-router shows this very well router.vuejs.org/guide/advanced/…
– Abhishek Gupta
Nov 15 '18 at 9:10
@AllieSyadiqin The docs for vue-router shows this very well router.vuejs.org/guide/advanced/…
– Abhishek Gupta
Nov 15 '18 at 9:10
add a comment |
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.
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%2f53295693%2fvue-router-push-typeerror-oncomplete-is-not-a-function%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