在 Vue js 中使用 Sweetalert2 删除确认答案

【问题标题】：Delete confirmation with Sweetalert2 in Vue js在 Vue js 中使用 Sweetalert2 删除确认
【发布时间】：2018-03-18 23:40:13
【问题描述】：

我正在尝试在用户单击删除按钮时发出一个sweetalert，它会触发一个sweetalert，当用户单击Yes, Delete it! 它应该发出一个删除状态的axois 请求。当用户单击Yes, Delete it! 时，sweetalert 将关闭，但从未发出请求。如果我删除 sweetalert 并留下请求，它将删除记录。

删除按钮

<button @click="destroy(statuses.id)" class="btn btn-danger btn-flat btn-sm"> <i class="fa fa-remove"></i> </button>

删除方法

methods: {
            destroy(id) {
                swal({
                    title: "Delete this order status?",
                    text: "Are you sure? You won't be able to revert this!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    confirmButtonText: "Yes, Delete it!",
                }, () => {
                    del('status-delete/' + id)
                })
            }
        }

【问题讨论】：

你能在回调中添加console.log(something)，看看是否正在调用回调吗？
您是通过安装软件包还是使用直接 Javascript 源来设置 Sweetalert2？如果你安装了，那么你需要导入它
@WreighI 完全忘记了这一点，但我只是尝试过，并且没有调用回叫。 :(
@ankitpatel 我确保导入它

标签： javascript laravel vue.js sweetalert2

【解决方案1】：

根据文档，您可以这样做。

swal({
    title: "Delete this order status?",
    text: "Are you sure? You won't be able to revert this!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#3085d6",
    confirmButtonText: "Yes, Delete it!"
}).then((result) => { // <--
    if (result.value) { // <-- if confirmed
        del('status-delete/' + id);
    }
});

参考：https://sweetalert2.github.io/

【讨论】：

酷哥，为我工作

【解决方案2】：

试试这个：

  swal({
     title: 'Are you sure?',
     text: "You won't be able to revert this!",
     type: 'warning',
     showCancelButton: true,
     confirmButtonColor: '#3085d6',
     cancelButtonColor: '#d33',
     confirmButtonText: 'Yes, delete it!',
     cancelButtonText: 'No, cancel!',
     buttonsStyling: true
  }).then(function (isConfirm) {
     if(isConfirm.value === true) {
        axios.post('status-delete/'+id, {
           data: {
              id: id
           }
       }).then(function (response) {
          console.log('success')
       })
    }
  });

【讨论】：