Reutilizar componente select dependiente livewire para crear y editar

Question

Espero me puedan ayudar, estoy comenzando con livewire, cree un componente select dependiente, el componente funciona muy bien, el detalle es cuando lo quiero reutilizar para realzar un update y cargarle los valores predeterminados o actuales que tiene el tipo solo carga el tipo pero no carga los subtipos hasta que hago un cambio en el select.

Aquí les muestro mi código:

<?php

namespace App\Livewire;

use App\Models\Config\TipoUnidades;
use App\Models\Config\SubtipoUnidades;
use Livewire\Component;

class SelectUdmComponent extends Component
{

    public $tipos;
    public $subtipos = [];
    public $tipoId;
    public $subtipoId;

    public function mount(){
        $this->tipos = TipoUnidades::all();
        $this->subtipos = collect();
    }

    public function updatedTipoId($value){
        $this->subtipos = SubtipoUnidades::where('tipo_unidad_id', $value)->get();
        $this->subtipo = $this->subtipos->first()->id ?? null;
    }

    public function render()
    {
        return view('livewire.select-udm-component');
    }
}

.blade

<div>
    <x-label>Tipo:</x-label>

    <select class="form-select mb-3"  name="udm_tipo_unidad" id="udm_tipo_unidad" required  wire:model.live="tipoId">
  
       @foreach($tipos as $tipo)
        <option value="{{$tipo->id}}">{{$tipo->tipo_unidad}}</option>
       @endforeach
      </select>

      <x-label>Subtipo:</x-label>
      <select class="form-select mb-3" name="udm_subtipo_unidad" id="udm_subtipo_unidad" required wire:model="subtipoId">
        @if ($subtipos->count()==0)
        <option value="">Debe seleccionar un tipo antes.</option>
        @endif
        @foreach($subtipos as $subtipo)
        <option value="{{$subtipo->id}}">{{$subtipo->subtipo_unidad}}</option>
       @endforeach
      </select>
</div>

Los parametros los envio por JQuery asi:

<button class="btn btn-sm btn-ligh BtnUnidadAcciones"  
        data-accion="editar"
        data-id="{{$unidad->id}}" 
        data-unidad="{{$unidad->unidad}}"
        data-clave-interna="{{$unidad->clave_interna}}" 
        data-tipo-unidad="{{$unidad->subtipo_unidad->tipo_unidad->id}}"
        data-subtipo-unidad="{{$unidad->subtipo_unidad->id}}"
        data-descripcion="{{$unidad->descripcion}}"
        data-bs-toggle="modal" 
        data-bs-target="#AccionesUnidadModal">
   <i class="fa-solid fa-pencil fa-sm text-primary"></i>
</button>

y aquí los asigno:

$('.BtnUnidadAcciones').click(function(){

    var id = $(this).data('id');
    var accion = $(this).data('accion');
    var tipo = $(this).data('tipo-unidad');
    var subtipo = $(this).data('subtipo-unidad');
    var unidad = $(this).data('unidad');
    var clave = $(this).data('clave-interna');
    var descripcion = $(this).data('descripcion');
    

    $('#id_unidad').val(id);
    $('#accion_unidad').val(accion);
    $('#udm_tipo_unidad').val(tipo);
    $('#udm_subtipo_unidad').val(subtipo);
    $('#unidad').val(unidad);
    $('#clave_interna').val(clave);
    $('#descripcion_unidad').val(descripcion);

});

Al crear una nueva unidad mi select dependiente funciona muy bien, el detalle es cuando quiero utilizar este componente al ejecutar la accion para editar una unidad

Agradezco su atención, espero me puedan ayudar :(

Answer 1

En Livewire 3 se recomienda ponerle una llave a los elementos en un ciclo para que Livewire pueda darle seguimiento a estos cuando ocurren updates o deletes, puedes corregir tus foreach de la siguiente manera:

<div>
<x-label>Tipo:</x-label>

<select class="form-select mb-3"  name="udm_tipo_unidad" id="udm_tipo_unidad" required  wire:model.live="tipoId">

   @foreach($tipos as $tipo)
    <option wire:key="tipo-{{$tipo->id}}" value="{{$tipo->id}}">{{$tipo->tipo_unidad}}</option>
   @endforeach
  </select>

  <x-label>Subtipo:</x-label>
  <select class="form-select mb-3" name="udm_subtipo_unidad" id="udm_subtipo_unidad" required wire:model="subtipoId">
    @if ($subtipos->count()==0)
    <option value="">Debe seleccionar un tipo antes.</option>
    @endif
    @foreach($subtipos as $subtipo)
    <option wire:key="subtipo-{{$subtipo->id}}" value="{{$subtipo->id}}">{{$subtipo->subtipo_unidad}}</option>
   @endforeach
  </select>

De esta manera garantizas que cada elemento del bucle tenga una llave diferente a pesar del tipo de operación que ejecutes