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() {

   }
}
17
Bargain23 25 juil. 2017 à 07:18

2 réponses

Meilleure réponse

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) { ... }
30
DaveS 27 juin 2018 à 17:33

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

5
DaveS 27 juin 2018 à 17:29