Mixing
How to have a Onload event with Vuejs - specifically how to put the script in the method and the way to get a...
export default {
methods: {
hotbod() { document.querySelector("body")},
doStuff() {
hotbod.className += " animate";
},
window:onload = function() {
doStuff();
},
},
}
Above is the code, that I think has some errors in it - and for some reason I cannot get the javascript to work (On page load, there are CSS that gets loaded).
javascript vue.js methods
asked Jan 2 at 15:03
Shadowed ZoumShadowed Zoum
13
add a comment |
export default {
methods: {
hotbod() { document.querySelector("body")},
doStuff() {
hotbod.className += " animate";
},
window:onload = function() {
doStuff();
},
},
}
Above is the code, that I think has some errors in it - and for some reason I cannot get the javascript to work (On page load, there are CSS that gets loaded).
javascript vue.js methods
asked Jan 2 at 15:03
Shadowed ZoumShadowed Zoum
13
add a comment |
export default {
methods: {
hotbod() { document.querySelector("body")},
doStuff() {
hotbod.className += " animate";
},
window:onload = function() {
doStuff();
},
},
}
Above is the code, that I think has some errors in it - and for some reason I cannot get the javascript to work (On page load, there are CSS that gets loaded).
javascript vue.js methods
asked Jan 2 at 15:03
Shadowed ZoumShadowed Zoum
13
export default {
methods: {
hotbod() { document.querySelector("body")},
doStuff() {
hotbod.className += " animate";
},
window:onload = function() {
doStuff();
},
},
}
Above is the code, that I think has some errors in it - and for some reason I cannot get the javascript to work (On page load, there are CSS that gets loaded).
javascript vue.js methods
javascript vue.js methods
asked Jan 2 at 15:03
Shadowed ZoumShadowed Zoum
13
asked Jan 2 at 15:03
Shadowed ZoumShadowed Zoum
13
asked Jan 2 at 15:03
Shadowed ZoumShadowed Zoum
13
asked Jan 2 at 15:03
Shadowed ZoumShadowed Zoum
13
asked Jan 2 at 15:03
Shadowed ZoumShadowed Zoum
13
13
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
If you want to call a method upon the emission of the window onload event, simply use a relevant Vue lifecycle hook to attach the event listener. For example:
export default {
create() {
window.addEventListener("load", this.onWindowLoad);
},
methods: {
onWindowLoad() {
console.log("window load event");
},
},
};
Instead of created, you might also use beforeCreate, beforeMount, or mounted. I don't think there's functionally a difference in this case.
You also may want to detach the listener upon the component's destruction (hooks beforeDestroy and destroy), though in practice, because it's only firing once, it may not matter.
Also note that, for reasons of scope, if you use an anonymous callback function, it must be an arrow function.
answered Jan 2 at 16:15
benasbenas
643
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%2f54008600%2fhow-to-have-a-onload-event-with-vuejs-specifically-how-to-put-the-script-in-th%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
If you want to call a method upon the emission of the window onload event, simply use a relevant Vue lifecycle hook to attach the event listener. For example:
export default {
create() {
window.addEventListener("load", this.onWindowLoad);
},
methods: {
onWindowLoad() {
console.log("window load event");
},
},
};
Instead of created, you might also use beforeCreate, beforeMount, or mounted. I don't think there's functionally a difference in this case.
You also may want to detach the listener upon the component's destruction (hooks beforeDestroy and destroy), though in practice, because it's only firing once, it may not matter.
Also note that, for reasons of scope, if you use an anonymous callback function, it must be an arrow function.
answered Jan 2 at 16:15
benasbenas
643
add a comment |
If you want to call a method upon the emission of the window onload event, simply use a relevant Vue lifecycle hook to attach the event listener. For example:
export default {
create() {
window.addEventListener("load", this.onWindowLoad);
},
methods: {
onWindowLoad() {
console.log("window load event");
},
},
};
Instead of created, you might also use beforeCreate, beforeMount, or mounted. I don't think there's functionally a difference in this case.
You also may want to detach the listener upon the component's destruction (hooks beforeDestroy and destroy), though in practice, because it's only firing once, it may not matter.
Also note that, for reasons of scope, if you use an anonymous callback function, it must be an arrow function.
answered Jan 2 at 16:15
benasbenas
643
add a comment |
If you want to call a method upon the emission of the window onload event, simply use a relevant Vue lifecycle hook to attach the event listener. For example:
export default {
create() {
window.addEventListener("load", this.onWindowLoad);
},
methods: {
onWindowLoad() {
console.log("window load event");
},
},
};
Instead of created, you might also use beforeCreate, beforeMount, or mounted. I don't think there's functionally a difference in this case.
You also may want to detach the listener upon the component's destruction (hooks beforeDestroy and destroy), though in practice, because it's only firing once, it may not matter.
Also note that, for reasons of scope, if you use an anonymous callback function, it must be an arrow function.
answered Jan 2 at 16:15
benasbenas
643
If you want to call a method upon the emission of the window onload event, simply use a relevant Vue lifecycle hook to attach the event listener. For example:
export default {
create() {
window.addEventListener("load", this.onWindowLoad);
},
methods: {
onWindowLoad() {
console.log("window load event");
},
},
};
Instead of created, you might also use beforeCreate, beforeMount, or mounted. I don't think there's functionally a difference in this case.
You also may want to detach the listener upon the component's destruction (hooks beforeDestroy and destroy), though in practice, because it's only firing once, it may not matter.
Also note that, for reasons of scope, if you use an anonymous callback function, it must be an arrow function.
answered Jan 2 at 16:15
benasbenas
643
answered Jan 2 at 16:15
benasbenas
643
answered Jan 2 at 16:15
benasbenas
643
answered Jan 2 at 16:15
benasbenas
643
643
add a comment |
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%2f54008600%2fhow-to-have-a-onload-event-with-vuejs-specifically-how-to-put-the-script-in-th%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
