Vue3使用Element Plus的MessageBox报Uncaught ReferenceError: then is not defined

安全阿岳

2026-10-12

问题解决方法

报错原因

你调用的this.$confirm返回值为undefined，所以后续调用.then()时会抛出then is not defined的错误。Vue3 下 Element Plus 对全局实例方法的挂载逻辑做了调整，Options API 中直接通过this调用$confirm经常会出现方法未正确挂载的问题，返回值为空导致报错。

修复方案

直接使用全量引入的ElMessageBox实例调用confirm方法即可，不需要通过this获取，修改handleDelete函数代码如下：

handleDelete(row) {
    // 直接从全局ElementPlus对象获取ElMessageBox调用
    ElementPlus.ElMessageBox.confirm("Do you want to delete the record?","Warning",{
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        type: "warning"
    }).then(() => {
        console.log("delete record");
        axios.get("/checkitem/delete.do?id="+row.id).then(res => {
            // 建议删除成功后刷新列表
            this.findPage()
        });
    }).catch(() => {
        // 取消删除无操作可留空
    });
}