如何將 Laravel 中的自定義變量顯示到 Sweet Alert 消息中

Question

我正在使用 Laravel v8 和 Sweet Alert v2，我想在用戶單擊“刪除”按鈕時顯示一條彈出消息。

所以我編碼了這個：

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    let form = $(this).parents('form');
    Swal.fire({
        title: "Confrimation!",
        text: "Are you sure you want to delete [this] user",
        type: "warning",
        allowEscapeKey: false,
        allowOutsideClick: false,
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        showLoaderOnConfirm: true,
        closeOnConfirm: false
    }).then((isConfirm) => {
        if (isConfirm.value === true) {
            document.getElementById("delForm").submit();
            return true;
        }
        return false;
    });
});

所以這很好用，每當我為用戶單擊刪除按鈕時，都會彈出一條消息，要求我確認或取消該過程。

但我也想在 Swal 的text屬性中顯示用戶名（將其替換為[this] ）。

所以最終的text會是這樣的：

Are you sure you want to delete {{ $user->name }} user

這是表格：

<div class="card-body table-responsive p-0">
    <table class="table table-hover">
        <tbody>
            <tr>
                <th>User ID</th>
                <th>User Name</th>
                <th>Actions</th>
            </tr>
            @if($users->count() != 0)
                @foreach($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    @if($user->isSameUser($user->id))
                        <td class="d-flex">
                            <div class="btn-group">
                                <form id="delForm" action="{{ route('admin.users.destroy' , ['user' => $user->id]) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <input id="btn-submit" type="submit" class="btn btn-sm btn-orange ml-1" value="Delete"></input>
                                </form>
                            </div>
                        </td>
                    @endif
                </tr>
                @endforeach
            @else
                <td colspan="10" class="text-center">Nothing to show!</td>
            @endif
        </tbody>
    </table>
</div>

但是不知道如何將用戶名 ( {{ $user->name }} ) 發送到甜蜜警報消息，以便在Swal的文本中顯示它。

事實上，我試過測試這個：

Swal.fire({
                title: "Attention!",
                text: "{!! isset($user) ? json_decode($user->id) : '' !!}",
                ...

但是沒有輸出任何東西，這意味着$user沒有定義！

那么這里出了什么問題？ 如何從 Laravel 獲取數據並將其顯示在 Sweet Alert 彈出消息中？

Answer 1

您可以傳遞用戶名以提交具有數據屬性的輸入

<input id="btn-submit" type="submit" data-name="{{ $user->name }}" class="btn btn-sm btn-orange ml-1" value="Delete" />

在提交函數中，您將獲得 data 屬性的值，例如：

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    let name = $(this).data('name');
    Swal.fire({
        title: "Confrimation!",
        text: `Are you sure you want to delete ${name} user`,
...

或者您可以將 PHP 變量傳遞給 javascript 變量內部提交函數偵聽器

let name = "{{ $user->name }}"

Answer 2

嘗試將 php 變量的值存儲到 javascript 變量中

<script>
var messageTxt = "<?= isset($user) ? json_decode($user->id) : '' ?>"
Swal.fire({
                title: "Attention!",
                text: messageTxt,
})
</script>