在vue js中使用SweetAlert2在删除项目之前进行模式确认

Question

我的sweetalert2出现错误，并且在开发应用程序时使用了laravel vue。我希望我的应用程序发生的事情是创建一个确认模式以删除数据库中的一行。每当我单击“是”时，该项目都会被删除，但是当我单击“取消”按钮时，模式将关闭，但也会删除整行。到目前为止，我很困惑，这是我第一次学习这些框架，我想了解更多有关此的信息。

这是我在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'
                        )
                    }
                })
        }
    }

这是我的button放在表格的td内：

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

这是我的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!');
}

所有操作都正常（CRUD），但是当我尝试实现sweetalert2时，删除操作是多次的。有人可以帮我吗？

Answer 1

如果这样，您必须在内部编写API调用

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

Answer 2

您的splice索引不正确。它将返回-1，然后将删除最后一项。

应该是

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

完整代码

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.id !== id)
                this.$swal(
                  'Deleted!',
                  'Your post has been deleted!',
                  'success'
                )
              });
            }
      })
  }
}