Laravel Livewire : Input select, 选择默认选项

Question

我正在尝试从我的数据库中获取国家代码并尝试通过 IP 地址获取默认值。它按我想要的方式工作了一秒钟，但我不知道会发生什么，但它会自行刷新并滚动到第一个选项而不是所选选项。

Livewire Controller 组件

use App\Models\CountryCodes;
use Livewire\Component;
use Location;

class TestCountry extends Component
{
    public $iso;
    public $country_codes;
    public $country_code;

    public function mount()
    {
        $iso=Location::get('ip');
        $this->iso=$iso->countryCode;
    }

    public function render()
    {
        return view('livewire.test-country',[
            $this->country_codes = CountryCodes::select('nicename','iso','phonecode')->get()->toArray()
        ]);
    }
}

Livewire Blade 组件

<select wire:model.lazy="country_code" name="country_code" id="country_code" class="form-control" required>
    @foreach($country_codes as $country_code)
        <option value="{!! $country_code['iso'] !!}"
                wire:key="{{$country_code['iso']}}"
                {{ $country_code['iso'] == $iso ? 'selected' : ''}}>
            {!! $country_code['iso'] !!} +{!! $country_code['phonecode'] !!}
        </option>
    @endforeach
</select>

此代码确实选择了我的默认选项，但它会更改并自动移动到第一个选项。我在这里做错了什么吗？

Answer 1

我相信发生的事情是，$iso 设置正确，但是 select 绑定(bind)到 $country_code 属性，而不是 $iso，简单地说，您的检查有效，但由于 $country_code 没有值，当 Livewire 更新状态时，所选选项将丢失。

TLDR:Livewire 正在检查 wire:model 属性中的任何内容，因此必须设置类属性才能使其正常工作。

我会尝试这样的事情:

public function mount()
{
    $iso = Location::get('ip');
    $this->iso = $iso->countryCode;

    // set $country_code to $iso
    $this->country_code = $this->iso;
}

我相信 Livewire 会智能地选择状态，所以我认为可以删除 selected 检查:

<select wire:model.lazy="country_code" name="country_code" id="country_code" class="form-control" required>
    @foreach($country_codes as $country_code)
        <option
            value="{!! $country_code['iso'] !!}"
            wire:key="{{$country_code['iso']}}"
        >
            {!! $country_code['iso'] !!} +{!! $country_code['phonecode'] !!}
        </option>
    @endforeach
</select>

此外，任何使用 {!! 的理由!! 标签而不只是 {{ }}？