Currently, I am working on a vue page that includes a navigation-guard. This particular page serves as an 'Update Details' section where I have implemented the use of beforeRouteLeave. The purpose of this setup is to display a warning modal if any changes are made to the details. However, I seem to have hit a roadblock in the functionality. Whenever I try to close the modal by clicking the 'Disregard Changes' button, I encounter an error message:
"Navigation aborted from "/myAccount/accountDetails" to "/contactus" via a navigation guard."
I have attempted using $emit on the click event, but I am unable to trigger my $on method in the component when the modal closes.
Component
beforeRouteLeave (to, from , next) {
if (!this.detailsChanged) {
next();
} else {
next(false);
let data = {
fromPage: 'PersonalDetailsPage',
toPage: '/contactus',
personalDetails: {
name: this.pdName,
comp_name: this.pdCompName,
ddi: this.pdTelNo,
ext: this.pdExtNo,
mob: this.pdMobNo,
email: this.pdEmailAdd
}
};
VueEvent.$emit('show-details-not-saved-modal', data);
}
}
Whole modal code
<template>
<div class="modal fade danger-modal" id="detailsNotSavedModal" tabindex="-1" role="dialog" aria-labelledby="detailsNotSavedModal" aria-hidden="true"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content danger-modal-content">
<div class="modal-header danger-modal-headerfooter justify-content-start">
Updated details not saved
</div>
<div class="modal-body">
<p>The details have changed but have not been saved.</p>
<p>Are you sure you want to disregard the updated details?</p>
<p>Clicking 'Save details' will save the updated details.</p>
<p>Clicking 'Disregard changes' will disregard any updated details.</p>
</div>
<div class="modal-footer danger-modal-headerfooter">
<button ref="saveButton" class="btn btn-success" type="submit" data-dismiss="modal" @click="updateDetails">Save details</button>
<router-link :to="navigateTo" tag="button" class="btn btn-danger" data-dismiss="modal" @click="disregardDetails">Disregard changes</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "DetailsNotSavedModal",
data() {
return {
passedDetails: [],
navigateTo: ''
}
},
created() {
VueEvent.$on('show-details-not-saved-modal', ( passedDetails ) => {
this.passedDetails = passedDetails;
console.log('passedDetails', passedDetails)
this.navigateTo = this.passedDetails.toPage;
$('#detailsNotSavedModal').modal('show').on('shown.bs.modal', this.focus);
});
},
methods: {
focus() {
this.$refs.saveButton.focus();
},
updateDetails() {
alert('Save clicked')
},
disregardDetails() {
this.$emit('disregard_changes', { detailsChanged: false })
// Also tried using a button and the below
// this.$router.push(this.navigateTo);
}
}
}
</script>
In my attempts to resolve this issue, I have been emitting 'disregard_clicked' everywhere in my hooks but unfortunately, it never gets called.
VueEvent.$on('disregard_changes', ( data ) => {
this.detailsChanged = data;
console.log('0')
});
To summarize, my goal is to prevent navigation if details are changed, prompt the modal upon clicking 'Save', which would then close the modal and save the details. Clicking 'Disregard' should also close the modal and guide the user to the selected menu option.