Estoy viendo un problema que me genera Livewire cuando uso CUALQUIER formulario Javascript. Utilice el siguiente formulario: https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045 (Aunque probé otros formularios y me pasa con todos debido a los eventos de wire:model de livewire)
El problema es que WIRE:MODEL me lleva a la primera sección y no puedo utilizar WIRE:IGNORE por que me anula comportamientos de SELECT relacionados.
En la segunda sección utilizo el siguiente formulario relacionado:
<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>
Y esto no me permite usar el WIRE:IGNORE para anular los eventos.
El problema es que cualquier WIRE:MODEL genera un evento que me lleva el formulario a la primera sección. Pareciera ser un REFRESH
¿Alguien conoce como podría utilizar livewire sin tener este inconveniente?
EDICIÓN
Componente Si bien tengo esta funcionalidad, la comenté para ver el si el problema continuaba y si persiste.
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
]);
}
Y el método que recolecta los datos: Ahora lo tengo en modo prueba pero me trae bien todos los datos.
public function Publicar()
{
dd($this->area);
}
El problema se basa en los campos WIRE:MODEL probé agregando tiempo de envío de eventos de la siguiente manera:
<input type="text" wire:model.debounce.500ms="name">
Y esto funciona hasta que se cumple el tiempo. Por tal motivo se que todo es por el evento que genera Livewire. Pero no encuentro como solucionarlo.
SOLUCIÓN
Encontré una forma de solucionar este inconveniente trabajandolo como un paginador, de la siguiente manera: En el componente declaré la variable que va a hacer de contador y paginador.
// 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--;
}
En la vista
// 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>