使用Alpine.js实现表格行点击仅展示对应地址详情

问题根源在于你把show状态声明在<tbody>上，导致所有行共享同一个布尔值状态，点击任何按钮都会切换这个全局状态，从而显示所有地址行。

解决方法是改用跟踪激活的客户ID来替代单一的布尔值状态：

1. 将<tbody>的x-data改为存储当前激活的客户ID，初始值为null：

   <tbody class="overflow-y-auto" x-data="{ activeId: null }">
   

2. 修改按钮的点击事件，切换当前客户ID的激活状态：

   <button class="address-button" x-on:click="activeId = activeId === {{ $customers->id }} ? null : {{ $customers->id }}">View Address</button>
   

3. 将地址行的x-show条件改为判断当前激活ID是否等于该行客户的ID：

   <tr x-show="activeId === {{ $customers->id }}" class="border-b border-gray-200">
   

完整修正后的代码如下：

<tbody class="overflow-y-auto" x-data="{ activeId: null }">
    @foreach ($customer as $customers)
        <tr class="border-b border-gray-200">
            <td class="px-2 py-1 whitespace-nowrap text-xs text-gray-900"></td>
            <td class="px-2 py-1 whitespace-nowrap text-xs text-gray-900">{{ $customers->id }}</td>
            <td class="px-2 py-1 whitespace-nowrap text-xs text-gray-900">{{ $customers->name }}</td>
            <td class="px-2 py-1 whitespace-nowrap text-xs text-gray-900">{{ $customers->email }}</td>
            <td class="px-2 py-1 whitespace-nowrap text-xs text-gray-900">
                <div>
                    <button class="address-button" x-on:click="activeId = activeId === {{ $customers->id }} ? null : {{ $customers->id }}">View Address</button>
                </div>
            </td>
            <td class="px-2 py-1 whitespace-nowrap text-xs text-gray-900">
                <a href="{{ route('customers.edit', $customers->id) }}"
                    class="text-indigo-600 hover:text-indigo-900"><svg xmlns="http://www.w3.org/2000/svg"
                        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path>
                        <polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon>
                    </svg></a>
            </td>
        </tr>
        <tr x-show="activeId === {{ $customers->id }}" class="border-b border-gray-200">
            <td class="px-2 py-1 whitespace-nowrap text-xs text-gray-900"></td>
            <td colspan="5" class="px-2 py-1 whitespace-nowrap text-xs text-gray-900">
                @if ($customers->addresses)
                    @php
                        $addresses = is_string($customers->addresses) ? json_decode($customers->addresses, true) : $customers->addresses;
                        $addresses = isset($addresses['addresses']) ? $addresses['addresses'] : $addresses;
                        $num = 1;
                    @endphp
                    @if (!empty($addresses) && is_array($addresses))
                        @foreach ($addresses as $address)
                            <div class="">
                                <strong>Address {{ $num }}</strong><br>

                                @if (array_key_exists('street1', $address))
                                    <strong>Street 1:</strong> {{ $address['street1'] }}<br>
                                @endif
                                @if (array_key_exists('street2', $address))
                                    <strong>Street 2:</strong> {{ $address['street2'] }}<br>
                                @endif
                                @if (array_key_exists('postcode', $address))
                                    <strong>Postcode:</strong> {{ $address['postcode'] }}<br>
                                @endif
                                @if (array_key_exists('city', $address))
                                    <strong>City:</strong> {{ $address['city'] }}<br>
                                @endif
                                @if (array_key_exists('state', $address))
                                    <strong>State:</strong> {{ $address['state'] }}<br>
                                @endif
                                @if (array_key_exists('country', $address))
                                    <strong>Country:</strong> {{ $address['country'] }}<br>
                                @endif
                            </div>
                            @if (!$loop->last)
                                <br>
                            @endif
                            @php
                                $num++;
                            @endphp
                        @endforeach
                    @endif
                @endif
            </td>
        </tr>
    @endforeach
</tbody>

这样修改后，点击某一行的"View Address"按钮只会显示对应客户的地址，再次点击则会隐藏。

另外，注意你的循环变量命名有点混淆：@foreach ($customer as $customers)，建议改为@foreach ($customers as $customer)（复数数组对应单数变量），这样代码可读性更好，但不影响功能。

内容的提问来源于stack exchange，提问作者muhaz