In my single page application, a screen consist of multiple components. I want to know is there any data has been modified/changed in the screen across all the component when we move to next screen.
For example, I am having Vue class "createProject.vue":
<template>
<Comments></Comments>
<ProjectSelection></ProjectSelection>
<MessageArea></MessageArea>
</template>
class Comments.vue,
<template>
<v-textarea
id="input--comments"
name="Comments"
></v-textarea>
</template>
class ProjectSelection.vue,
<template>
<div>
<v-text-field
id="input--email"
:label="Email"
></v-text-field>
</div>
</template>
class MessageArea.vue,
<template>
<v-textarea
id="input--message-area"
name="message"
></v-textarea>
</template>
When I move to the next screen, I want to know is there any data has been changed or not.
Kindly help me to identify the data changes across all the components.
In the root component:
<template>
<Comments @modified="dataUpdated = true"></Comments>
<ProjectSelection @modified="dataUpdated = true"></ProjectSelection>
<MessageArea @modified="dataUpdated = true"></MessageArea>
</template>
<script>
export default
{
data()
{
return {
dataModified: false,
nextRoute: null,
}
},
created()
{
window.addEventListener('beforeunload', this.pageLeave);
},
beforeDestroy()
{
window.removeEventListener('beforeunload', this.pageLeave);
},
beforeRouteLeave(to, from, next)
{
this.routeLeave(to, from, next);
},
methods:
{
routeLeave(to, from, next)
{
if(this.dataModified)
{
this.nextRoute = next;
// show dialog to the user that there is unsaved data - it might call this.ignoreUnsaved
}
},
ignoreUnsaved()
{
// hide the dialog
if (this.nextRoute) this.nextRoute();
},
pageLeave(e)
{
if(this.dataModified)
{
const confirmationMessage = 'There is unsaved data. Ignore it and continue?';
(e || window.event).returnValue = confirmationMsg;
return confirmationMessage;
}
},
}
}
</script>
In Comments.vue:
<template>
<v-textarea v-model.trim="newComment" />
</template
<script>
export default
{
data()
{
return {
trackThisForChanges:
{
newComment: '',
},
}
},
watch:
{
trackThisForChanges:
{
deep: true,
handler()
{
this.$emit('modified');
}
}
}
}