Uncaught (in promise) cancel 报错 及 解决方法
在使用element的confirm组件时,点击取消可能会提示一条错误。如下:使用法式如下:methods:{clickDelete(){this.$confirm("确认删除此内容吗?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {// 执行真正的删除事件})
·
在使用element
的confirm
组件时,点击取消可能会提示一条错误。如下:
使用法式如下:
methods:{
clickDelete(){
this.$confirm("确认删除此内容吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
// 执行真正的删除事件
})
}
}
点击删除,会弹出确认框,点击取消,就会出现该错误。
经过一番排查摸索,发现错误的原因很简单。
element官网示例如下:
由图可见,该弹窗包含两个按钮,理所应该需要两个事件对应。
this.$confirm
内置promise方法。当点击确定的时候,会执行.then(()=>{})
部分逻辑;同理,当点击取消的时候,就会执行.catch(()=>{})
捕获错误的逻辑。
如果在该种方式使用的时候,没有进行错误捕获,就会提示该错误。
所以解决办法就是进行错误捕获。代码修改如下:
methods:{
clickDelete(){
this.$confirm("确认删除此内容吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
// 执行真正的删除事件
})
.catch(()=>{}) // 添加错误捕获
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)