Laravel LivewireX是表行单击上的事件

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>

1. 未显示链接光标。我把这个样式设置为<tr style="cursor: pointer;">
2. 也有不写电线的方法:点击每个

感谢

Answer 1

1. 你正在使用Tailwindcss，所以你可以在你的<tr>元素上使用cursor-pointer;

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

您可以在这里查看其他可用的游标类。

2. 您应该能够将点击事件连接到您的<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事件传播。关于事件修饰符的更多信息请点击此处。