Laravel Livewire：输入 select，默认选项 selected

Question

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

Livewire 控制器组件

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>

此代码执行 select 我的默认选项，但它会自动更改并移动到第一个选项。我是不是做错了什么？

Answer 1

我相信发生的事情是，$iso 设置正确，但 select 绑定到 $country_code 属性，而不是 $iso，简而言之，您的检查有效，但是因为 $country_code 没有值，当 Livewire 更新状态时 selected 选项丢失。

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

我会尝试这样的事情：

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

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

我相信 Livewire 会智能地 select 状态，所以我认为 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>

此外，在视图中使用 {!! !!} 标签而不仅仅是 {{ }} 的任何原因？

Laravel Livewire：输入 select，默认选项 selected

Laravel Livewire: Input select, default option selected

laravel

laravel-livewire

laravel-8