使用Livewire实现单选功能：从多选框到单选按钮的正确实践

// app/Http/Livewire/AddressSelector.php
<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Address; // 假设您的地址模型位于 App\Models\Address

class AddressSelector extends Component
{
    public $addresses; // 存储所有地址的集合
    public $selectedAddressId; // 存储当前选中的地址ID

    /**
     * Livewire组件初始化方法
     * 在组件首次加载时执行
     */
    public function mount()
    {
        // 从数据库加载所有地址
        $this->addresses = Address::all();

        // 设置一个默认选中项。例如，选中第一个地址（如果存在）
        // 否则，设置为 null 或其他默认值
        $this->selectedAddressId = $this->addresses->first()->id ?? null;
    }

    /**
     * 渲染组件视图
     */
    public function render()
    {
        return view('livewire.address-selector');
    }

    /**
     * 这是一个可选方法，当 $selectedAddressId 属性改变时会自动调用
     * 您可以在这里添加额外的逻辑，例如日志记录或触发其他事件
     */
    // public function updatedSelectedAddressId($value)
    // {
    //     // 当选中的地址ID改变时执行某些操作
    //     // 例如：Log::info("Selected Address ID changed to: " . $value);
    //     // $this->dispatchBrowserEvent('address-selected', ['id' => $value]);
    // }
}

{{-- resources/views/livewire/address-selector.blade.php --}}
<div>
    <h4 class="mb-3">请选择一个地址：</h4>

    @foreach ($addresses as $address)
        <div class="col-12 col-lg-3 p-2 m-2 rounded" style="border: dashed #a1a1a1;">
            <div class="row align-items-center">
                <div class="col-2">
                    <input type="radio"
                           id="address-{{ $address->id }}" {{-- 唯一的ID --}}
                           name="addressSelection" {{-- 确保所有单选按钮使用相同的name属性 --}}
                           value="{{ $address->id }}" {{-- 当选中时，这个值会赋给selectedAddressId --}}
                           wire:model="selectedAddressId"
                           class="form-check-input">
                </div>
                <div class="col-10">
                    <label class="form-check-label" for="address-{{ $address->id }}">
                        <p class="mb-1">
                            {{ $address->province->name ?? '' }} - {{ $address->city->name ?? '' }}
                        </p>
                        <p class="mb-0">
                            {{ $address->address }}
                        </p>
                    </label>
                    {{-- 您可以根据需要添加编辑和删除链接 --}}
                    {{-- <a wire:click="setAddress({{$address->id}})" class="float-end" data-bs-toggle="modal" href="#editAddressModal" role="button">编辑</a> --}}
                    {{-- <a wire:click="$emit('addressId',{{$address->id}})" class=" me-3 float-end" data-bs-toggle="modal" href="#deleteAddressModal" role="button">删除</a> --}}
                </div>
            </div>
        </div>
    @endforeach

    <hr class="my-4">
    <p class="mt-3">当前选中的地址ID: <strong>{{ $selectedAddressId ?? '无' }}</strong></p>

    {{-- 可以在此处添加一个按钮来提交选中的地址，或者在selectedAddressId变化时自动触发逻辑 --}}
    {{-- <button wire:click="confirmSelection" class="btn btn-primary mt-3">确认选择</button> --}}
</div>