Uncaught ReferenceError: then is not defined in Element Ui Plus - vue.js

Question

I'm using the vue3 and element-ui-plus to build a project.
But when I tried to use the MessageBox in element-ui-plus, there was an error Uncaught ReferenceError: then is not defined coming out.
Other functions are good except MessageBox.
Here is my code. And Please refer to the handleDelete function.
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
const app ={
el: '#app',
data(){
return {
pagination: {
currentPage: 1,
pageSize: 10,
total: 0,
queryString: null
},
formData: {},
}
},
created() {
this.findPage();
},
methods: {
findPage() {
var param = {
currentPage: this.pagination.queryString == null ? this.pagination.currentPage : 1,
pageSize: this.pagination.pageSize,
queryString: this.pagination.queryString
};
axios.post("/checkitem/findPage.do",param).then(res => {
this.pagination.total = res.data.total;
this.dataList = res.data.rows;
});
},
resetForm() {
this.formData = {};
},
handleDelete(row) {
this.$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 => {
});
}).catch(() => {
});
}
}
};
Vue.createApp(app).use(ElementPlus).mount("#app");
<script>

Answer 1

#Oliver you could try making your function async. See below
async handleDelete(row) {
try {
await this.$confirm("Do you want to delete the record?","Warning",{
confirmButtonText: "Yes",
cancelButtonText: "No",
type: "warning"
})
console.log("delete record")
axios.get("/checkitem/delete.do?id="+row.id)
} catch (error) {
// handle error
} finally {
// something else if you need
}
})
Question though, are you meant to be waiting for a user to confirm/cancel the click before you trigger execute the delete?