Laravel Livewire：输入选择，选择默认选项

Question

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

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 刀片组件

<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 绑定到$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>

另外，有什么理由在视图中使用{!! !!} 标签而不仅仅是{{ }}？