Laravel Livewire 2.x 是表格行点击事件

Question

我在 Laravel Livewire 中有一个非常简单的表格

<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. 还有不写wire的方法：点击每个

谢谢

Answer 1

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

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

您可以查看其他cursor classes available here。

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

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

更新

因此，当您在整个 <tr> 上放置一个 click 处理程序并在按钮上放置另一个处理程序时，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的信息。