I'm trying to make a sweetalert when the user clicks the delete button it will trigger a sweetalert and when the user clicks Yes, Delete it! it should make an axois request to delete the status. When the user clicks on Yes, Delete it! the sweetalert closes but the request is never made. If I remove the sweetalert and just leave the request it will delete the record.

Delete button

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

Delete method

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)
                })
            }
        }

I'm trying to make a sweetalert when the user clicks the delete button it will trigger a sweetalert and when the user clicks Yes, Delete it! it should make an axois request to delete the status. When the user clicks on Yes, Delete it! the sweetalert closes but the request is never made. If I remove the sweetalert and just leave the request it will delete the record.

Delete button

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

Delete method

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)
                })
            }
        }

• javascript
• laravel
• vue.js
• sweetalert2

• can you add a console.log(something) inside that callback to see if that callback is being called? – Wreigh Commented Mar 18, 2018 at 23:55
• did you setup Sweetalert2 by installing package or use direct Javascript source? if you installed that then you need to import it – ankit patel Commented Mar 18, 2018 at 23:57
• @WreighI pletely forgot about that but I just tried that and the call back is not being called. :( – Yosef Commented Mar 18, 2018 at 23:57
• @ankitpatel i made sure to import it – Yosef Commented Mar 18, 2018 at 23:58

2 Answers 2

Based from the documentation, you can do this.

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);
    }
});

Reference: https://sweetalert2.github.io/

Try this:

  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')
       })
    }
  });