这个报错一开始我也很懵逼,因为他也没说具体说是什么问题,也是我在随便点点一些交互的时候发现的这个问题,后面发现这个问题其实是使用ElementUI方法没有定义完全导致的。
elementUI有很多dialog的弹出框,都有确认和取消的选型,选型也对应的各个方法,这边就是因为我们定义对应的方法导致这个报错。
在使用element
的confirm
组件时,点击取消可能会提示一条错误。如下:
methods:{
clickDelete(){
this.$confirm("确认删除此内容吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
// 执行真正的删除事件
})
}
}
点击删除,会弹出确认框,点击取消,就会出现该错误。
看了源代码后,发现this.$confirm
内置promise方法。当点击确定的时候,会执行.then(()=>{})
部分逻辑;同理,当点击取消的时候,就会执行.catch(()=>{})
捕获错误的逻辑。
因此我们需要为这个promise添加一个catch事件,也就是为dialog的方法的取消按钮添加一个事件方法。
methods:{
clickDelete(){
this.$confirm("确认删除此内容吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
// 执行真正的删除事件
})
.catch(()=>{}) // 添加错误捕获
}
}
这样就可以成功解决报错~