laravel - The options of a select field in livewire do not work - Stack Overflow

This is my component:

<?php
namespace App\Livewire;

use Livewire\Component;
use App\Models\Departamento;
use App\Models\Provincia;
use App\Models\Distrito;

class UbigeoSelector extends Component
{
    public $departamento_id, $provincia_id, $distrito_id;
    public $provincias = [];
    public $distritos = [];


    public function mount($departamento_id = null, $provincia_id = null, $distrito_id = null)
    {
        $this->departamento_id = $departamento_id;
        $this->provincia_id = $provincia_id;
        $this->distrito_id = $distrito_id;
    }

    public function render()
    {
        return view('livewire.ubigeo-selector', [
            'departamentos' => Departamento::all(),
            'provincias' => $this->provincia_id ? Provincia::where('departamento_id', $this->departamento_id)->get() : [],
            'distritos' => $this->distrito_id ? Distrito::where('provincia_id', $this->provincia_id)->get() : [],
        ]);
    }

    public function updatedDepartamentoId($value)
{
    logger()->info('Departamento actualizado: ' . $value); 
    $this->provincia_id = null;
    $this->distrito_id = null;
    $this->provincias = Provincia::where('departamento_id', $value)->get();
}
    public function updatedProvinciaId($value)
    {

        $this->distrito_id = null;

 
        $this->distritos = Distrito::where('provincia_id', $value)->get();
    }
}

This is the view of my component, which only shows a select field and when selecting an option it should activate the following select field

<div>

    <div>
        <label for="departamento">Departamento</label>
        <select wire:model="departamento_id" id="departamento">
            <option value="">Seleccione un departamento</option>
            @foreach($departamentos as $departamento)
                <option value="{{ $departamento->id }}" @if($departamento->id == $departamento_id) selected @endif>{{ $departamento->nombre }}</option>
            @endforeach
        </select>
    </div>


    @if($departamento_id)
        <div>
            <label for="provincia">Provincia</label>
            <select wire:model="provincia_id" id="provincia">
                <option value="">Seleccione una provincia</option>
                @foreach($provincias as $provincia)
                    <option value="{{ $provincia->id }}" @if($provincia->id == $provincia_id) selected @endif>{{ $provincia->nombre }}</option>
                @endforeach
            </select>
        </div>
    @endif


    @if($provincia_id)
        <div>
            <label for="distrito">Distrito</label>
            <select wire:model="distrito_id" id="distrito">
                <option value="">Seleccione un distrito</option>
                @foreach($distritos as $distrito)
                    <option value="{{ $distrito->id }}" @if($distrito->id == $distrito_id) selected @endif>{{ $distrito->nombre }}</option>
                @endforeach
            </select>
        </div>
    @endif
</div>

The way it works should be that when selecting an option from the "Departments" part it should render showing me in the second select the "Provinces" of the selected "Department" but the wire:model does not activate anything

This is my component:

<?php
namespace App\Livewire;

use Livewire\Component;
use App\Models\Departamento;
use App\Models\Provincia;
use App\Models\Distrito;

class UbigeoSelector extends Component
{
    public $departamento_id, $provincia_id, $distrito_id;
    public $provincias = [];
    public $distritos = [];


    public function mount($departamento_id = null, $provincia_id = null, $distrito_id = null)
    {
        $this->departamento_id = $departamento_id;
        $this->provincia_id = $provincia_id;
        $this->distrito_id = $distrito_id;
    }

    public function render()
    {
        return view('livewire.ubigeo-selector', [
            'departamentos' => Departamento::all(),
            'provincias' => $this->provincia_id ? Provincia::where('departamento_id', $this->departamento_id)->get() : [],
            'distritos' => $this->distrito_id ? Distrito::where('provincia_id', $this->provincia_id)->get() : [],
        ]);
    }

    public function updatedDepartamentoId($value)
{
    logger()->info('Departamento actualizado: ' . $value); 
    $this->provincia_id = null;
    $this->distrito_id = null;
    $this->provincias = Provincia::where('departamento_id', $value)->get();
}
    public function updatedProvinciaId($value)
    {

        $this->distrito_id = null;

 
        $this->distritos = Distrito::where('provincia_id', $value)->get();
    }
}

This is the view of my component, which only shows a select field and when selecting an option it should activate the following select field

<div>

    <div>
        <label for="departamento">Departamento</label>
        <select wire:model="departamento_id" id="departamento">
            <option value="">Seleccione un departamento</option>
            @foreach($departamentos as $departamento)
                <option value="{{ $departamento->id }}" @if($departamento->id == $departamento_id) selected @endif>{{ $departamento->nombre }}</option>
            @endforeach
        </select>
    </div>


    @if($departamento_id)
        <div>
            <label for="provincia">Provincia</label>
            <select wire:model="provincia_id" id="provincia">
                <option value="">Seleccione una provincia</option>
                @foreach($provincias as $provincia)
                    <option value="{{ $provincia->id }}" @if($provincia->id == $provincia_id) selected @endif>{{ $provincia->nombre }}</option>
                @endforeach
            </select>
        </div>
    @endif


    @if($provincia_id)
        <div>
            <label for="distrito">Distrito</label>
            <select wire:model="distrito_id" id="distrito">
                <option value="">Seleccione un distrito</option>
                @foreach($distritos as $distrito)
                    <option value="{{ $distrito->id }}" @if($distrito->id == $distrito_id) selected @endif>{{ $distrito->nombre }}</option>
                @endforeach
            </select>
        </div>
    @endif
</div>

The way it works should be that when selecting an option from the "Departments" part it should render showing me in the second select the "Provinces" of the selected "Department" but the wire:model does not activate anything

• laravel
• laravel-livewire
• livewire-3

Share Improve this question Follow edited Jan 18 at 1:10 TUPKAP 5,41922 gold badges55 silver badges1919 bronze badges asked Jan 17 at 0:22 JeanHzJeanHz 322 bronze badges 1

• Check if update methods are called, test in different browsers, update Livewire, and clear all caches – Developer Nilesh Commented Jan 17 at 5:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In Livewire 3 wire:model is deferred by default. To obtain an immediate call to the backend you must use the live modifier:

<select wire:model.live="provincia_id" id="provincia">
    .....           
</select>