在 Vue js 中使用 Sweet 警报删除确认

Question

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?

Answer 1

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

Answer 2

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