Livewire中实现单选功能：使用Radio Button的最佳实践

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Address; // 假设你有一个Address模型

class AddressComponent extends Component
{
    public $addresses; // 用于存储所有地址
    public $selectedAddressId; // 用于存储用户选中的地址ID

    /**
     * 组件挂载时初始化数据。
     * 在实际应用中，你可能需要根据用户或其他条件加载地址。
     */
    public function mount()
    {
        // 从数据库或其他数据源获取所有地址
        // 这里为了演示，假设Address::all()返回一个集合
        $this->addresses = Address::all();

        // 设置一个默认选中的地址ID，例如第一个地址的ID
        if ($this->addresses->isNotEmpty()) {
            $this->selectedAddressId = $this->addresses->first()->id;
        } else {
            $this->selectedAddressId = null; // 如果没有地址，则不默认选中
        }
    }

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

    // 你可以在这里添加其他方法，例如保存选中的地址等
    public function saveSelectedAddress()
    {
        // 处理保存 selectedAddressId 的逻辑
        session()->flash('message', 'Selected address ID: ' . $this->selectedAddressId);
    }
}

<div>
    <h3>选择您的地址：</h3>
    @foreach ($addresses as $address)
        <div class="mt-2">
            <!-- 关键点：
                 1. type="radio"
                 2. name="address" (所有单选按钮共享相同的name属性)
                 3. value="{{ $address->id }}" (每个按钮的值是其对应的地址ID)
                 4. wire:model="selectedAddressId" (绑定到Livewire组件的属性)
            -->
            <input type="radio"
                   id="address-{{ $address->id }}"
                   name="address"
                   value="{{ $address->id }}"
                   wire:model="selectedAddressId"
                   class="form-check-input">
            <label for="address-{{ $address->id }}" class="form-check-label ms-2">
                {{ $address->province->name ?? '' }} - {{ $address->city->name ?? '' }} - {{ $address->address }}
            </label>
        </div>
    @endforeach

    <hr class="my-3">
    <h4>当前选中的地址ID: <span class="badge bg-primary">{{ $selectedAddressId }}</span></h4>

    <!-- 演示如何使用选中的ID -->
    <button wire:click="saveSelectedAddress" class="btn btn-success mt-3">
        保存选择
    </button>

    @if (session()->has('message'))
        <div class="alert alert-info mt-3">
            {{ session('message') }}
        </div>
    @endif
</div>