Livewire 电线：选择选项上的模型无法正常工作

Posted 2023-02-22

【中文标题】Livewire 电线：选择选项上的模型无法正常工作

【英文标题】：Livewire wire:model on Select Option not working properly

【发布时间】：2021-07-24 09:30:48

【问题描述】：

我有一个使用 wire:model 的下拉菜单

<div class="form-group">
    <label>Menu</label>
    <select wire:model="chapter_id" class="form-control @error('chapter_id') is-invalid @enderror" placeholder="Menu">
        @foreach ($chapters as $chapter)
            <option value=" $chapter->id "> $chapter->name </option>
        @endforeach
    </select>
    @error('chapter_id')
        <div class="invalid-feedback"> $message </div>
    @enderror
</div>

如果我确实更改了选项（成功分配的 $chapter_id），它会起作用。但是，如果我将其保留为默认值（不更改选项），或者它只有一个选项，则不会分配 $chapter_id $chapter_id not assigned

你们能帮我解决这个问题吗？

【问题讨论】：

您必须将默认值设置为chapter_id。我认为没有其他解决方法。至少我没有找到任何东西，这对我来说很有意义。

【参考方案1】：

我看到了解决此问题的两种方法。正如之前告诉对方的那样，一个选项可以建议用户选择一个选项

<option value="">Please select</option>

另一个有这个属性的默认值

public $chapter_id = '1';

如果提交时需要此值，则必须在规则中引用它

protected $rules = [
'chapter_id' => 'required'
];

【参考方案2】：

wire:model 仅在更改时设置或更新。因此，如果您已经在该项目上（或只有一个），它将不会被触发。您可以使用 wire:init 解决此问题，但与直接在组件的 mount-method 中设置相比，我没有看到太多好处。

我的解决方案是添加一个“请选择”条目作为第一个条目。这会强制通过选择相关项目来触发更改（即使只有一个选项可用）。