CODEWITHSUNDEEP
javascriptvue.jssweetalert
Alex Deneris
Alex Deneris

Reputation: 173

Using SweetAlert2 in vue js to make a modal confirmation before deleting the item

I have an error in my sweetalert2 and I am using laravel vue in developing my app. What I want my app to happen is to create a confirmation modal for deleting a row in my database. Whenever I click "Yes", the item is removed but when I click the cancel button, the modal closes but also deletes the entire row. I am very confused as of the moment and this is my first time learning these frameworks and I want to learn more about this.

this is my code under the IndexComponent.vue

methods: {
        deletePost(id) {
            this.$swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
                closeOnCancel: true
                }).then((result) => {
                    //send request to server 
                    let uri = `/api/post/delete/${id}`;
                    axios.delete(uri).then(response => {
                        this.posts.splice(this.posts.indexOf(id), 1);
                    });
                    if (result.value) {
                        this.$swal(
                        'Deleted!',
                        'Your post has been deleted!',
                        'success'
                        )
                    }
                })
        }
    }

This is my button placed inside a td in my table:

<td><button @click="deletePost(post.id)" class="btn btn-danger">Delete</button></td>

This is what's inside my PostController.php:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;

public function delete($id) {
    $post=Post::find($id);
    $post->delete();
    return response()->json('Successfully deleted!');
}

All operations are working (CRUD) but when I tried to implement the sweetalert2 the deletions are multiple. Can someone please help me?

Upvotes: 1

Views: 1099

Answers (2)

ittus
ittus

Reputation: 22393

Your splice index is incorrect. It will return -1, then it will delete the last item.

It should be

this.posts = this.posts.filter(post => post.id !== id)

Full code

methods: {
  deletePost(id) {
    this.$swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!',
        closeOnCancel: true
        }).then((result) => {
            //send request to server 
            if (result.value) {
              let uri = `/api/post/delete/${id}`;
              axios.delete(uri).then(response => {
                this.posts = this.posts.filter(post => post.id !== id)
                this.$swal(
                  'Deleted!',
                  'Your post has been deleted!',
                  'success'
                )
              });
            }
      })
  }
}

Upvotes: 0

Ankur Patel
Ankur Patel

Reputation: 488

You have to write your API call inside if like this

methods: {
    deletePost(id) {
        this.$swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            closeOnCancel: true
            }).then((result) => {
                //send request to server 
                if (result.value) {
                     let uri = `/api/post/delete/${id}`;
                    axios.delete(uri).then(response => {
                      this.posts.splice(this.posts.indexOf(id), 1);
                    });
                    this.$swal(
                    'Deleted!',
                    'Your post has been deleted!',
                    'success'
                    )
                }
            })
    }
}

Upvotes: 1

Related Questions