使用 Alpine.js 显示表中单击行的地址详细信息

Question

在表格中，我有一个“查看地址”按钮，当我单击时，它将显示地址详细信息。它工作正常，但是，由于我还是 Alpine.js 的新手，当我单击查看地址时，它会显示表中所有行的所有地址详细信息。下面是我的代码：

<tbody class="overflow-y-auto" x-data="{ show: false }">
    @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=" show=!show ">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="show" 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>

我相信，由于我声明了

<tr x-show="show">

，它将显示所有行的所有地址详细信息。我尝试使用基于

$customer->id

但不知何故它不起作用。

Answer 1

您只设置了一个变量show来处理所有行，因此当其值更改时，所有行都会相应显示

为了解决这个问题而不扰乱一切，我们可以将 show 变量转换为数组，并使用 @foreach 循环索引来访问它，这样每个地址部分都有自己的 show[n] 变量（我使用自定义变量而不是 $loop->index 因为它更简洁）：

<tbody class="overflow-y-auto" x-data="{ show: Array.from({length: {{ count($customer) }} }, () => false) }">

        @foreach ($customer as $rowN => $customers)

            <tr>

            .....

               <button class="address-button" x-on:click="show[{{$rowN}}] = !show[{{$rowN}}]">View Address</button>

            .....

            </tr>
 
            <tr x-show="show[{{$rowN}}]" class="border-b border-gray-200">

                .....

                @if ($customers->addresses)
                    .....
                @endif

                .....
  
            </tr>

另外为了避免页面渲染时隐藏行的闪烁，您可以在地址行中添加一个 x-cloak ：

<tr x-cloak x-show="show[{{$rowN}}]" class="border-b border-gray-200">