Detect browser close or page change VueJs - vue.js

Question

I try to detect when user change/insert into an input and he try to change/close page to give him a warning. I do some research but till now I didn't find anything.
<b-form-group label="Name" label-for="name-input">
<b-form-input
id="name-input"
v-model="name"
></b-form-input>
</b-form-group>
created() {
document.addEventListener('beforeunload', this.handlerClose)
},
handlerClose: function handler(event) {
console.log('CHANGE!!!!');
},

Answer 1

Detect navigating to a different page or close the page
You can try using the same eventhandler beforeunload on the window object, not the document object, as stated in the MDN Web Docs for example ( https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event ). The event should handle both cases, switching page and closing page.
<script>
export default {
created() {
window.addEventListener('beforeunload', (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = '';
});
}
}
</script>
This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page. If the user confirms, the browser navigates to the new page, otherwise it cancels the navigation.
About your second question to detect whetever changes has been made : This eventhandler does not detect changes.
In order to mantain a state whetever the user made a change, e.g. to a form, I would outsource this state with a data prop isChanged and initialize it with false. Then use Vue directives v-on:change or v-on:input to change the prop from false to true.
<template>
<div>
<input type="text" #change="userMadeChange" v-model="inputText" />
</div>
</template>
<script>
export default {
data() {
return {
inputText : "",
isChanged : false
}
},
methods : {
userMadeChange() {
this.isChanged = true;
}
}
}
</script>

Answer 2

The easier way is to simply compare the stringified JSON of your selected data. If they are equivalent, then we know that the data has not been changed/updated/mutated by the user.
Here's a simple setup:
Create a method that generates the JSON for the user data that you want to observe for changes.
When the compoonent/app is created, you cache the data that it is created with and store/cache it
Create a computed property that simply returns the current state of the user data and cached user data
In the beforeunload handler, you can then check the returned value of this computed property to determine of the user has mutated data or not.
See proof-of-concept below:
new Vue({
el: '#app',
// COMPONENT DATA
data: {
// Dummy data
firstName: 'John',
lastName: 'Doe',
// Cache form data
cachedFormData: null,
},
// COMPONENT LIFECYCLE HOOK
created: function() {
// Create a cache when component/app is created
this.cachedFormData = this.formDataForComparison();
document.addEventListener('beforeunload', this.handlerClose);
},
// COMPUTED PROPERTIES
computed: {
// Compares cached user data to live data
hasChanged() {
return this.cachedFormData !== this.formDataForComparison();
}
},
// COMPONENT METHODS
methods: {
// Callback handler
handlerClose: function() {
if (this.hasChanged) {
// Logic when change is detected
// e.g. you can show a confirm() dialog to ask if user wants to proceed
} else {
// Logic when no change is detected
}
},
// Helper method that generates JSON for string comparison
formDataForComparison: function() {
return JSON.stringify({
firstName: this.firstName,
lastName: this.lastName
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
<br />
<br />
<span>Has user changed data? <strong>{{ hasChanged }}</strong></span>
</div>
An alternative method would be simply storing a flag that has a ground state of false, as proposed by the other answer. The flag state is switched to true wheneveran input/change event is detected on the element. However, there are several disadvantages associated with this method:
Even when the user undo his/her changes, it will still marked as changed. This constitutes a false positive.
You will need to either bind watchers to all the v-model members, or bind input/change event listeners to all input elements on the page. If your form is huge, there is a chance that you will forget to do this to an input element.