Laravel Livewire 和 Bootstrap 表单的重新加载问题

当我使用任何Javascript 表单时，我发现 Livewire 存在问题。使用以下表格：https ://bbbootstrap.com/snippets/multi-step-form-wizard-30467045 （虽然我尝试了其他形式，但由于livewire的wire：model事件，所有这些都发生了）

问题是WIRE:MODEL将我带到第一部分，我不能使用WIRE:IGNORE因为它为我覆盖了相关的 SELECT 行为。

在第二部分中，我使用以下相关形式：

  <div class="form-group">
  <label for="provincia">Provincia</label>
  <select wire:model="ubicacionSeleccionada" class="form-control" id="ubicacion">
       <option value=''>Seleccionar provincia</option>
       @foreach($ubicaciones as $ubicacion)
       <option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
       @endforeach                                          
  </select>
  </div>
                                        
    
   <div class="form-group">
   <label for="tipopropiedad">Localidad</label>
   <select wire:model="area" class="form-control" id="localidad
         {{ count($this->areas)== 0 ? 'hidden' : '' }} ">
         <option value=''>Seleccionar localidad</option>
         @foreach($this->areas as $area)
         <option value={{ $area->id }}>{{ $area->name }}</option>
         @endforeach
   </select>
   </div>

这不允许我使用WIRE:IGNORE来覆盖事件。

问题是任何WIRE:MODEL都会生成一个将表单带到第一部分的事件。这似乎是一个REFRESH

有谁知道我如何使用 livewire 而不会有这种不便？

版

组件 虽然我有这个功能，但我还是把它注释掉了，看看问题是否继续存在，是否仍然存在。

public function render()
{

    if(!empty($this->ubicacionSeleccionada)) {
        $this->areas = Area::where('ubicacion_id', $this->ubicacionSeleccionada)->get();
    }
    //CREAMOS CODIGO ALEATORIO Y LO ENVIAMOS A LA VISTA
    $caracteres = array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
    $codigo = '';

    for ($i = 1; $i <= 3; $i++) {
        $codigo .= $caracteres[rand(0, 35)];
    }

    return view('livewire.publication.publication-component', [
        'propiedades' => TipoDePropiedad::get(),
        'ubicaciones' => Ubicacion::get(),
        'categorias' => Category::get(),
        'codigoUsuarioPropiedad' => $codigo
    ]);
}

以及收集数据的方法：现在我在测试模式下拥有它，但它很好地为我带来了所有数据。

public function Publicar()
    {
       dd($this->area);
    }

问题基于我尝试添加事件调度时间的 WIRE:MODEL 字段，如下所示：

<input type="text" wire:model.debounce.500ms="name">

这一直有效，直到时间结束。出于这个原因，我知道一切都是因为 Livewire 生成的事件。但我找不到如何解决它。

解决方案

我找到了一种通过将其用作寻呼机来解决此问题的方法，方法如下： 在组件中，我声明了将用作计数器和寻呼机的变量。

// Paginador | contador
public $pasos;

// La inicializamos en cero 
public function mount()
{
    $this->pasos= 0;
}

// Al presionar el botón siguiente aumenta el contador
public function incrementar()
{
    $this->pasos++;
}

// Al presionar el botón atrás disminuye el contador
public function decremento()
{
    $this->pasos--;
}

看得见_

  // Mostramos la vista en base al valor de la variable del contador
    @if($pasos== 0)
       <div>contenido....</div>
    @endif
    
    @if($pasos== 1)
      <div>contenido....</div>
    @endif
    
// Aumenta el contador    
<button wire:click="incrementar()" type="button" class="btn btn-primary">Siguiente</button>

// Decrementa el contador
<button wire:click="decremento()" type="button" class="btn btn-primary">Atras</button>