Как загрузить диалоговое окно перед обновлением / выходом страницы в vue js?

Question

Я работаю над формой и хочу спросить пользователя, хотят ли они представить свой прогресс, прежде чем покинуть страницу. Я использую vue js и vuetify:

            <v-dialog
                v-model="showExitDialog"
            >
                <v-card>
                    <v-card-title>Do you want to submit?</v-card-title>
                    <v-card-actions>
                        <v-spacer/>
                        <v-btn @click="submit">Yes</v-btn>
                        <v-btn @click="showExitDialog = false">No</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

'showExitDialog: false' - это то, что записано в данных

Моя текущая функция выглядит так внутри созданного хука :

created() {
    document.addEventListener("beforeunload", function(event) { 
        this.showExitDialog = true;
    });
    console.log('1234567890');
},

Это вообще не вызывает диалоговое окно, но функция log на самом деле регистрирует консоль, и я не могу точно сказать, как это исправить, поскольку ошибок нет.

Как я могу сделать так, чтобы v-диалог отображался после обновления страницы / когда пользователь покидает страницу?

Answer 1

Я думаю, вы можете использовать что-то вроде:

window.onbeforeunload = function(event)
{
    //here display modal with app.showModal = true
};

* Это будет за пределами vue