输入日期上的越野车 livewire 循环答案

【问题标题】：Buggy livewire loop on input date输入日期上的越野车 livewire 循环
【发布时间】：2021-10-07 15:24:12
【问题描述】：

我的 livewire 组件中有一个循环输入日期，该循环有效，但我为更改 $term 所做的所有其他请求都会再次运行，但显示的输入日期少了 1 个。

我的术语模型，我有一个假按钮来帮助用户消除对输入的关注，从而提出更改值的请求。

<input class="form-control @error('term') is-invalid @enderror " id="term" type="number" name="term" wire:model.lazy="term" min='0' step='1'>

这是循环。

@for ($i; $i <= $term-1; $i++) 
       <div class="form-group row ">
       <label for="date" class="col-md-3 col-form-label "><small>{{$i+1}}.</small> Date
       <span style="color: red">*</span></label>
       <div class="col-md-9">
          <input class="form-control @error('date') is-invalid @enderror" id="date" type="date" name="date" wire:model.defer="date.{{$i}}">
          @error('date') <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
        </div>
         @endfor

第一个请求

第二次请求

如果我尝试再次请求更改$term，它将起作用，例如我输入6，它将显示 6 个输入日期，但如果我再次尝试更改，它将不会呈现一个输入日期。

【问题讨论】：

检查这个线程我们的，我没有看到你的代码有任何问题，所以这可能会帮助stackoverflow.com/questions/64834889/…

标签： php laravel laravel-blade laravel-livewire

【解决方案1】：

为此创建一个嵌套组件。

嵌套日期输入

<div>
 <div class="form-group row ">
   <label for="date" class="col-md-3 col-form-label "><small>{{$i+1}}.</small> Date
     <span style="color: red">*</span></label>
       <div class="col-md-9">
         <input class="form-control @error('date') is-invalid @enderror" id="date" type="date" name="date" wire:model.defer="date.{{$i}}">
         @error('date') <div class="invalid-feedback">{{ $message }}</div>
          @enderror
       </div>
 </div>
</div>

在父刀片中

@for ($i; $i <= $term-1; $i++) 
  @livewire('nested-date-input',['id' => $id],key($id.'input-date'))
@endfor

否则，您可以在父 div 元素或元素本身中使用 wire:key 指令

<div class="col-md-9" wire:key="{{ $id }}-input-date">
  <input class="form-control @error('date') is-invalid @enderror" id="date" type="date" name="date" wire:model.defer="date.{{$i}}">
     @error('date') <div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

我个人更喜欢嵌套组件解决方案。

【讨论】：