你如何在 Alpine.js 中进行确认删除模式

Question

我有一个表格（使用laravel-livewire-tables）和一个自定义视图，其中有一个编辑图标和一个删除图标。我正在尝试添加一个 alpine.js 模态以允许用户确认删除，但我不知道将模态代码放在哪里。

如果我把它放在自定义视图中，它会炸毁表格样式并在屏幕的 1/3 中卡住 8 或 9 列，即使模式没有显示也是如此。

任何人都有小提琴或资源？？？

Answer 1

我使用浏览器窗口确认方法。 使用 Alpine 3 + Livewire 2。

<button @click=" confirm('Are you sure?') ? @this.destoryUser({{$user->id}}) : false" class="text-white bg-gray-500 bg-opacity-30 rounded-full flex items-center justify-center">

使用 Alpine 中的 x-on:click 或 @click，然后使用 @this 指令访问 Livewire 方法 destoryUser 函数位于 Livewire 内部。

Answer 2

将您的模态表单放入 livewire 父组件中。

但是由于无论您使用什么框架，javascript 都是 javascript。不管是alpinejs、jquery、bootstrap..等等，说到底，核心语言还是javascript。 所以我的意思是，让你更容易。只需使用普通的旧模式引导来删除弹出窗口并使用事件

你可以像这样使用你的前端从后端运行一个函数

<script>
    Livewire.emit('theEventListenerFromYourBackendCode')
</script>

或者您可以使用这样的后端代码触发 javascript 代码

function theEventListenerFunction {
    $this->dispatchBrowserEvent('name-updated', ['newName' => $value]);
}
... // on your frontend
<script>
window.addEventListener('name-updated', event => {
    alert('Name updated to: ' + event.detail.newName);
})
</script>

另外，我发现有一个 youtube 系列使用引导模式进行 CRUD 操作.. 你应该看看 >>>> https://www.youtube.com/watch?v=_DQi8TyA9hI

Answer 3

确认.blade.php

<span x-data="{{ $xdata }}" x-cloak>
    <button type="button" x-on:click="isOpen = !isOpen"
        class="inline-flex items-center {{ $classes ?? '' }}
        {{ isset($type) ? 'px-6 py-2 rounded-lg text-white bg-blue-500 hover:bg-blue-600' : 'text-red-600 hover:text-red-700'}}">
        {{ $link }}
    </button>

    <div style="background-color: rgba(0, 0, 0, 0.4)" class="fixed z-40 top-0 right-0 left-0 bottom-0 h-full w-full"
        x-show="isOpen" x-on:click.away="isOpen = false" x-transition:enter="ease-out transition-slow"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in transition-slow" x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0">
        <div class="p-4 max-w-xl mx-auto absolute left-0 right-0 overflow-hidden mt-24">
            <form method="POST" action="{{ $route }}"
                onsubmit="deleteButton.disabled = true; deleteButton.classList.add('base-spinner');">
                @component('components.card', [
                'withFooter' => true
                ])

                <input type="hidden" name="{{ $idName }}" value="{{ $id }}">

                @method('DELETE')
                @csrf

                @component('components.heading', [
                'size' => 'large'
                ])
                {{ $title ?? ''}}
                @endcomponent

                {{ $slot }}

                @slot('footer')
                <div class="text-right">
                    <button type="button" x-on:click="isOpen = false"
                        class="px-4 py-2 rounded-lg text-gray-600 bg-white hover:text-blue-600 shadow mr-2">Cancel</button>
                    <button type="submit" name="deleteButton"
                        class="px-4 py-2 rounded-lg text-white bg-red-500 hover:bg-red-600 shadow">Confirm</button>
                </div>
                @endslot
                @endcomponent
            </form>
        </div>
    </div>
</span>

然后在您的表格 td 布局中

<table>
....

<td>
@confirm([
    'classes' => 'ml-1 mr-4',
    'title' => 'Are your sure you want to delete?',
    'link' => 'Delete',
    'id' => $category->id,
    'idName' => 'category_id',
    'route' => route('categories.delete'),
    'xdata' => json_encode([
        'isOpen' => false
    ])
])
    <p>If you delete the record you can't recover it.</p>
    <div class="border rounded-lg mt-4">
        <div class="flex py-2 px-4">
            <div class="mr-2">Category Name:</div>
            <div class="flex-1 text-truncate">
                <p class="mb-0 text-gray-800">{{ $category->name }}</p>
            </div>
        </div>
    </div>
@endconfirm
</td>

</table>