En mi aplicación de una sola página, una pantalla consta de varios componentes. Quiero saber si se ha modificado/cambiado algún dato en la pantalla en todo el componente cuando pasamos a la siguiente pantalla.
Por ejemplo, tengo la clase Vue "createProject.vue":
<template> <Comments></Comments> <ProjectSelection></ProjectSelection> <MessageArea></MessageArea> </template>comentarios de clase.vue,
<template> <v-textarea id="input--comments" name="Comments" ></v-textarea> </template>clase ProjectSelection.vue,
<template> <div> <v-text-field id="input--email" :label="Email" ></v-text-field> </div> </template>clase MessageArea.vue,
<template> <v-textarea id="input--message-area" name="message" ></v-textarea> </template>Cuando paso a la siguiente pantalla, quiero saber si se ha cambiado algún dato o no.
Por favor, ayúdenme a identificar los cambios de datos en todos los componentes.
En el componente raíz:
<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> En 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'); } } } }