Laravel Livewire 2.x 是 table 行点击事件

Question

我在 Laravel Livewire

中有非常简单的 Table

<table class="table-auto w-full">
    <thead>
        <tr>
            <th class="px-4 py-2">Id</th>
            <th class="px-4 py-2">Name</th>
            <th class="px-4 py-2">Age</th>
            <th class="px-4 py-2">Action</th>
        </tr>
        @foreach($students as $student)
            <tr>
                <td class="border px-4 py-2">{{$student->id}}</td>
                <td class="border px-4 py-2">{{$student->name}}</td>
                <td class="border px-4 py-2">{{$student->age}}</td>
                <td class="border px-4 py-2">
                    <x-jet-danger-button wire:click="confirmItemDeletion( {{ $student->id}})" wire:loading.attr="disabled">
                        Delete
                    </x-jet-danger-button>
                </td>
            <tr>
    @endforeach
    </tbody>
</table>

删除按钮也有效。我想打开另一个模型进行行单击编辑，同时删除按钮也应该起作用。

我尝试在每一个代码中添加此代码，但它的工作但是

<td class="border px-4 py-2" wire:click="confirmItemEdit( {{ $item->id}})">{{$student->id}}</td>

未显示 link 光标。为了得到这个我把这个样式放在 <tr style="cursor: pointer;">
还有没有办法不在每个

谢谢

Answer 1

您正在使用 Tailwindcss，因此您可以在 <tr> 元素上使用 cursor-pointer；

<tr class="cursor-pointer">
...
</tr>

你可以检查其他 cursor classes available here。

您应该能够将点击事件连接到您的 <tr> 元素；

<tr wire:click="confirmItemEdit({{ $item->id }})">
...
</td>

更新

因此，当您将 click 处理程序放在整个 <tr> 上并将另一个处理程序放在按钮上时，两个 click 事件都会触发，首先是按钮事件，然后是行。

最好避免这种情况，在按钮 click 事件上使用 .stop 修饰符。

<tr class="cursor-pointer" wire:click="confirmItemEdit({{ $item->id }})">
  <td>...</td>
  <td>
    <button wire:click.stop="confirmItemDeletion({{ $student->id }})">Delete</button>
  </td>
</tr>

.stop 修饰符阻止 click 事件传播。有关 event modifiers here.

的更多信息

Laravel Livewire 2.x 是 table 行点击事件

Laravel Livewire 2.x is event on table row click

laravel

laravel-livewire