javascript - 如何在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');
},

它根本不会弹出对话框，但日志功能实际上会记录到控制台，我不知道如何修复它，因为没有错误。

我怎样才能让它在页面刷新/用户离开页面时显示 v-dialog？

标签： javascriptvue.jsdialogvuetify.jsaddeventlistener

Answer 1

我想你可以使用类似的东西：

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

*这将在vue之外