J'ai un UnsavedChangesModal en tant que composant qui doit être lancé lorsque l'utilisateur essaie de quitter la page alors qu'il a des modifications non enregistrées dans les champs de saisie (j'ai trois champs de saisie dans la page).
components: {
UnsavedChangesModal
},
mounted() {
window.onbeforeunload = '';
},
methods: {
alertChanges() {
}
}
2 réponses
En supposant que vous utilisez vue-router (et vous devriez probablement l'être), alors vous voudrez utiliser le beforeRouteLeave garde. La documentation donne même un exemple de cette situation exacte:
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
Cela peut être ajouté directement sur votre composant:
components: { ... },
mounted: { ... }
methods: { ... },
beforeRouteLeave (to, from, next) { ... }
Utilisez-vous vue-router? Je regarderais dans les gardes de navigation. Je les garde à l'esprit, mais je ne les ai pas encore utilisés moi-même. Voici la documentation à leur sujet: https://router.vuejs.org/guide/ advanced / navigation-guards.html
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.