Tengo un componente alpine.js con guardado de datos en vivo. https://github.com/TerrePorter/CustomCountrySelectBox.git

Estoy tratando de cargar dos y, finalmente, tres de estos en secuencia en la página. Primero, el país, luego, cuando se selecciona, actualizo el estado/región, y finalmente, cuando se actualiza, actualizo la ciudad.

El problema es que cuando actualizo el estado/región, el código alpine.js no se ejecuta cuando Livewire actualizó esa parte de la página.

También traté de hacer que funcionara todo en una página, un cuadro de selección que actualiza el siguiente cuadro de selección, pero siempre fallaba al cargar la segunda matriz.

Aquí está la parte relevante de la plantilla.

 <div class="p-6"> <lable>Please select your location: </lable> @if ($country == '') @component('components.country-select-box', ['countryJson' => $countryJson])@endcomponent @endif @if ($stateJson != '') @component('components.state-select-box', ['stateJson' => $stateJson])@endcomponent @endif </div>

Aquí hay parte del código de Livewire donde actualizo el archivo JSON del estado.

 public function updatedCountry() { $this->stateJson = $this->getStateJson(); } public function getStateJson() { $r = Countries::where('short_name', '=', $this->country)->with('states')->first(); $ret = []; foreach ($r->states as $index => $item) { $ret[] = ['title' => $item->state_name, 'value' => $item->id]; } return json_encode($ret); }

Y finalmente, como se mencionó antes, este es el cuadro desplegable de selección que estoy usando, https://github.com/TerrePorter/CustomCountrySelectBox.git