检查循环中的第一项

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;
}

如果您已经有 collection 个 $networks，您也可以从 collection 中获取第一个项目。

public $selectedNetwork;

public $networks;

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

更新

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

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

检查循环中的第一项

Checked the first item in the loop

laravel

laravel-livewire