Livewire Laravel 添加动态选择，数据丢失如何解决？请

Question

添加下一个选择时，您会丢失市政当局的第一个选择的数据。

Livewire 控制器 SelectUsuario.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Http;

class SelectUsuario extends Component
{

    public $estados;
    public $estado;
    public $estadoSigla;
    public $municipios;

   public $selects = [];
    public $i = 0;

    public function add($i)
    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->selects, $i);
    }

    public function remove($i)
    {
        unset($this->selects[$i]);
    }

    public function mount()
    {
        $this->estados = Http::get(
            url("https://servicodados.ibge.gov.br/api/v1/localidades/estados"),
            ['orderBy' => 'nome']
        )->json();
    }

    public function updatedEstadoSigla()
    {
        $this->getMunicipios();
    }


    public function getMunicipios()
    {

       if ($this->estadoSigla != '') {
            foreach ($this->estadoSigla as $estado) {
                $this->municipios = json_decode(
                    Http::get(
                        url("https://servicodados.ibge.gov.br/api/v1/localidades/estados/{$estado}/municipios")
                    )->body(),
                    true
                );
            }

        }
    }

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

Livewire 组件 select-usuario.blade.php

<div class="form-group row">
    <div class="col-3"><label>Viagem</label></div>
    <div class="col-3"><label>Seção</label></div>
    <div class="col-4"><label>Funcionário</label></div>
    <div class="col-2"><label>Ação</label></div>
    <div class="col-3">
        <select class="form-control" data-item_id="0">
            <option value="R">Responsável</option>
        </select>
    </div>
    <div class="col-3">
        <select wire:model="estadoSigla.0" class="form-control" id="estado.0" name="estado.0">
            <option value="">selecione estado...</option>
            @foreach ($this->estados as $estado)
                <option value="{{ $estado['sigla'] }}">{{ $estado['nome'] }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-4">
        @if ($this->estadoSigla)
             <select class="form-control" name="municipio.0" id="municipio.0">
                <option value="" selected>selecione município...</option>
                    @foreach ($this->municipios as $municipio)
                        <option value="{{ $municipio['id'] }}">{{ $municipio['nome'] }}</option>
                    @endforeach
            </select>
        @endif
    </div>
    <div class="col-2">
        <button class="btn btn-info mb-2" wire:click.prevent="add({{ $i }})">adicionar</button>
    </div>
    {{-- Add Form --}}
    @foreach ($selects as $key => $value)
        <div class="col-3">
            <select name="item_name[]" class="form-control" data-item_id="{{$value}}">
                <option value="I">Ida</option>
                <option value="V">Volta</option>
                <option value="O">Ida e Volta</option>
                <option value="R">Responsável</option>
            </select>
        </div>
        <div class="col-3">
            <select wire:model="estadoSigla.{{ $value }}" class="form-control" name="estado.{{ $value }}" id="estado.{{ $value }}">
                <option value="">selecione estado...</option>
                @foreach ($this->estados as $estado)
                <option value="{{ $estado['sigla'] }}">{{ $estado['nome'] }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-4">
            @if ($estadoSigla)
                <select class="form-control" name="municipio.{{ $value }}" id="municipio.{{ $value }}">
                    <option value="" selected>selecione município...</option>
                    @foreach ($this->municipios as $municipio)
                            <option value="{{ $municipio['id'] }}">{{ $municipio['nome'] }}</option>
                    @endforeach
                </select>
            @endif
        </div>
        <div class="col-2">
            <button class="btn btn-dark mb-2" wire:click.prevent="remove({{ $key }})">remover</button>
        </div>
    @endforeach
</div>

Answer 1

尝试在循环选择元素中添加wire:key指令，而livewire需要跟踪它们的所有值。

<select wire:model="estadoSigla.{{ $value }}" class="form-control" id="estado.{{ $value }}" wire:key="estado-select-{{ $key }}"> // or $value, the unique identifier for its

另外，尝试将 wire:ignore.self 添加到选择元素的根 div 中