Ant Design Vue全局对话确认框（confirm）的回调不触发

我们先来看下官网给的案例和代码。

<template>
  <a-button @click="showConfirm">
    Confirm
  </a-button>
</template>
<script>
export default {
  methods: {
    showConfirm() {
      this.$confirm({
        title: 'Do you want to delete these items?',
        content: 'When clicked the OK button, this dialog will be closed after 1 second',
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {},
      });
    },
  },
};
</script>

官网给了两个回调一个是onOk 点击确认的回调，还有一个是onCancel 是点击取消的回调。

但是我们使用了 就会发现里面的一些使用到this指向不对。导致里面需要用到this的功能都失效。

解决办法：

只需要把这两个回调（onOk、onCancel）改成箭头函数即可。代码如下

 // 删除
        deleteItem (row) {
          this.$confirm({
            title: '提示',
            content: '您是否确认删除该组织？',
            // 点击确认触发的回调
            onOk: () => {
            //  这里模拟请求删除的接口
            setTimeout(() => this.$message.success('删除成功！'), 1000)
            },
            // 点取消触发的回调
            onCancel: () => {
              this.$message.success('你已经取消此操作！')
            }
          })
        },