检查循环中的第一项

Question

在 livewire 视图中，我在单选按钮内使用了一个 foreach 循环，我希望第一个显示的项目是 checked。我根据我所做的搜索编写了以下代码。在inspect元素中，我检查了页面代码，第一项添加了checked属性，但是在浏览器中，第一项是正常的，而不是checked，虽然添加了它的属性。

<div class="invest-amount-group g-2">
  @foreach($networks as $network)
     <div class="invest-amount-item">
          <input name="network"  wire:model="selectedNetwork" {{$loop->first ? 'checked' : ''}}  class="invest-amount-control " id="{{$network->id}}" value="{{$network->id}}" type="radio">
          <label class="invest-amount-label" for="{{$network->id}}">{{$network->network}}</label>
     </div>
  @endforeach
</div>

Answer 1

这是因为wire:model 的绑定优先于html checked 属性。您需要做的是在您的组件上为 $selectedNetwork 指定一个默认值。

举个例子：

public $selectedNetwork;

public function mount()
{
    $this->selectedNetwork = Network::first()->id;
}

如果您已经拥有$networks 的集合，您也可以从该集合中获取第一项。

public $selectedNetwork;

public $networks;

public function mount()
{
    $this->selectedNetwork = $this->networks->first()->id;
}

更新

您实际上并不需要{{$loop->first ? 'checked' : ''}}，因为选择哪个单选按钮取决于组件上$selectedNetwork 的值。

为了说明这一点；如果在您的组件中设置了$selectedNetwork = 3;，则无论您的@foreach 中是否有{{$loop->first ? 'checked' : ''}}，都将选择值为3 的单选按钮。