is it possible to pass function inside "done" callback in vue animation
enter: function(e, done) {
element.animate({
// ...
}, duration, done)
}
in a way that next "afterEnter" hook will be called ? If I do it jQuery way:
enter: function(e, done) {
element.animate({
// ...
}, duration, function() {
// do something
})
}
the "afterEnter" javascript hook is not called anymore
Answering own stupid question, it was pretty simple, just return it from callback. Documantation just messed me, there is "done" just called at the end of the hook.
https://v2.vuejs.org/v2/guide/transitions.html
enter: function(e, done) {
element.animate({
// ...
}, duration, function() {
// do something
return done()
})
}
Related
methods: {
showAlert() {
alert("alert");
}
},
created() {
setTimeout(this.showAlert(), 5000)
}
My codes are in here. I want to set time out in created area. But browser does not see setTimeout. it always runs when the page renders. Its not waiting. How to fix that problem?
run the method inside the setTimeout callback like :
created() {
setTimeout(()=>{
this.showAlert()
}, 5000)
}
I'm trying to debounce anything within an Action, it gets swallowed in one way or another...
Take this (pseudo) code:
import { debounce } from "lodash";
const actions = {
debounceSomeLogging ({ dispatch }, text) {
console.log("Outside debounced function.");
debounce(function() {
console.log("Inside debounced function.");
dispatch("doRealThing");
}, 1000);
},
doRealThing({ commit }) {
// Whatever
}
}
When I call the action, I see the Outside debounced function, but I can not see the other logging and the other action does not get triggered.
Anyone have experience with this and can point me in the right direction?
This should definate work
import { debounce } from "lodash";
const actions = {
debounceSomeLogging: debounce(({ dispatch }, text) => {
console.log("Inside debounced function.");
dispatch("doRealThing");
}, 1000),
doRealThing({ commit }) {
// Whatever
}
}
As nemesv pointed out in a comment, the debounce function does not call the inner function. So you need to call the debounce again, like so:
debounce(function() {
console.log("Inside debounced function.");
dispatch("doRealThing");
}, 1000)();
So, in short, it should look like this:
debounce(...)() instead of like this debounce(...).
I would like to detect when page is refreshed or reloaded in vue.js. I have read the question from this post Do something before reload or close in vue.js. It's using window.onbeforeunload. But the problem for me, where do I put this window function ? Could we use another default method from vuejs for detecting the page that is refreshed ?
Thank you
You can use the created function to call another function. Example:
created() {
window.addEventListener('beforeunload', this.handler)
},
methods: {
handler: function handler(event) {
// Do Something
}
}
or
created() {
window.addEventListener('beforeunload', function(event) {
event.returnValue = 'Write something'
})
},
Check it : https://forum.vuejs.org/t/detect-browser-close/5001/8
I have registered 'beforeunload' event on created hook of the component used by routes of vue router.
I want to call this event handler in order to remove user on browser tab close or browser tab refresh or browser close.
On ComponentA
created (){
window.addEventListener('beforeunload', () => {
this.removeUser()
return null
})
}
Smilarly on ComponentB
created (){
window.addEventListener('beforeunload', () => {
this.removeUser()
return null
})
}
And my router.js
{
path: '/staff/call/:session_key',
name: 'Staff Call',
component: ComponentA,
meta: {auth: true}
},
{
path: '/consumer/call/:session_key',
name: 'Consumer Call',
component: ComponentB
},
Here 'beforeunload' event handler is triggered randomly. That is sometimes it get triggered and sometimes not. I count find any pattern when it is triggered and when it is not.
What am I missing here?
Edit
I'd guess the most likely culprit then is exactly what #PatrickSteele said. From MDN:
Note: To combat unwanted pop-ups, some browsers don't display prompts
created in beforeunload event handlers unless the page has been
interacted with; some don't display them at all. For a list of
specific browsers, see the Browser_compatibility section.
I'd say it's likely you're seeing inconsistent behavior because you are sometimes not interacting with the page.
This may be a syntax error. created should be a method
created () {
window.addEventListener('beforeunload', this.removeUser)
},
methods: {
removeUser () {
//remove user here
}
}
A fiddle working: https://jsfiddle.net/e6m6t4kd/3/
It's work for me. while do something before reload or close in
vue.js
created() {
window.onbeforeunload = function(){
return "handle your events or msgs here";
}
}
I had to do some fiddling on the above examples, I believe this is the most robust solution:
let app1 = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: {
dirty_form: true,
},
created () {
console.log('created')
window.addEventListener('beforeunload', this.confirm_leaving)
},
methods: {
confirm_leaving (evt) {
if (this.dirty_form) {
const unsaved_changes_warning = "You have unsaved changes. Are you sure you wish to leave?";
evt.returnValue = unsaved_changes_warning;
return unsaved_changes_warning;
};
};
},
});
If you want detect page refresh/change in Vue whenever you press F5 or Ctrl + R, You may need to use Navigation Timing API.
The PerformanceNavigation.type, will tell you how the page was accessed.
created() {
// does the browser support the Navigation Timing API?
if (window.performance) {
console.info("window.performance is supported");
}
// do something based on the navigation type...
if(performance.navigation.type === 1) {
console.info("TYPE_RELOAD");
this.removeUser();
}
}
Not sure why none of the above were fully working for me in vue 3 composition api. Abdullah's answer partially works but he left out how to remove the listener.
setup() {
const doSomething = (e) => {
// do stuff here
return true
}
onBeforeMount(() => {
window.onbeforeunload = handleLeaveWithoutSaving
})
onUnmounted(() => {
window.onbeforeunload = null
})
}
I want to perform a task (scrolling to bottom, since new elements where added) after a view has been updated by vue.
Here is my code:
export default {
mounted() {
this.connect();
},
connection: null,
methods: {
connect: function () {
...
},
onMessage: function (msg) {
this.messages.push(msg);
this.scrollDown();
return true;
},
scrollDown: function () {
$("html, body").animate({
'scrollTop': $(this).offset().top
}, 100);
}
As you can see, the this.scrollDown(); is invoked after this.messages.push(msg);, so since the view is not updated immediately the scroll is not well performed.
How is it supposed to be made?
Try waiting for the DOM to be updated using:
this.$nextTick(function () {
this.scrollDown();
});