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

Question

我有一个使用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 未分配

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

Answer 1

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

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

另一个具有该属性的默认值

public $chapter_id = '1';

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

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

Answer 2

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

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