CODEWITHSUNDEEP
javascriptvue.js
masterhunter
masterhunter

Reputation: 559

Delete confirmation with Sweet alert in Vue js

I have a comment delete button in vue components. 

<button class="button" style="background-color: grey;" @click="destroy">Delete</button>

When the button clicked will call the method "destroy"

destroy(){
            swal({
                    title: "Delete this comment?",
                    text: "Are you sure? You won't be able to revert this!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    confirmButtonText: "Yes, Delete it!",
                    closeOnConfirm: true
                },
                function(){
                    axios.delete('/comment/' + this.comment.id + '/delete');

                    $(this.$el).fadeOut(300, () => {
                        return toastr.success('Comment deleted.');
                    });
                });
        },

i expect when alert come out, if users clicked confirm button then process to delete, but seem like when user clicked the delete function are not executed. What is the problems here?

Upvotes: 1

Views: 6264

Answers (2)

guesttttt
guesttttt

Reputation: 1

This is not only a this context error. SweetAlert is promise-based, so you need to call your axios request, in a Promise.prototype.then() method.

swal({
  title: "Delete this comment?",
  text: "Are you sure? You won't be able to revert this!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#3085d6",
  confirmButtonText: "Yes, Delete it!",
  closeOnConfirm: true
})
.then( () => {
  axios.delete('/comment/' + this.comment.id + '/delete');
  $(this.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})

Upvotes: 0

riyaz-ali
riyaz-ali

Reputation: 9034

The this context inside SWAL's callback function is the SWAL instance and not the Vue instance! This means that this.comment.id and this.$el are probably undefined and, thus, the function don't execute and would result in a TypeError.

To resolve this,

  • Use Arrow Functions

    swal({
  title: "Delete this comment?",
  text: "Are you sure? You won't be able to revert this!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#3085d6",
  confirmButtonText: "Yes, Delete it!",
  closeOnConfirm: true
}, () => {
  axios.delete('/comment/' + this.comment.id + '/delete');
  $(this.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})

  • Capture this

    let inst = this;
swal({
  title: "Delete this comment?",
  text: "Are you sure? You won't be able to revert this!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#3085d6",
  confirmButtonText: "Yes, Delete it!",
  closeOnConfirm: true
}, function onDelete(){
  axios.delete('/comment/' + inst.comment.id + '/delete');
  $(inst.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})

Upvotes: 3

Related Questions