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

Posted 2023-03-14

【中文标题】Laravel Livewire：输入选择，选择默认选项

【英文标题】：Laravel Livewire: Input select, default option selected

【发布时间】：2021-08-22 09:13:27

【问题描述】：

我正在尝试从我的数据库中获取国家代码并尝试通过 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>

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

【参考方案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>

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

【讨论】：

哇，这正是我想要的方式。对这个解决方案一无所知。非常感谢。老实说，我使用!! !! 只是没有任何正当理由将立即将其更改为 。另外，您能否告诉我是否有任何方法，例如使用wire:model 它会一次又一次地向livewire 控制器发送请求，因为我的wire:loading div 一次又一次地加载，即使在几次按键时也能如此。有什么方法可以避免它并仅在单击提交按钮时才通过 livewire 发送数据进行验证？

没有问题，很高兴它有效。如果这是您想要的，我会将wire:model.lazy 更改为wire.model.defer，这也是我大部分时间也倾向于使用的，上面的文档在这里：laravel-livewire.com/docs/2.x/properties#deferred-updating

非常感谢您的帮助。很长一段时间以来一直坚持这一点真的很有帮助。

没问题，很高兴它有帮助！

如果你觉得这个问题描述得很好，你也可以给它投票。