DOMException与select (承诺)

Question

我的组件中有一个下拉列表，它似乎导致了Livewire中的一个错误。

Uncaught (承诺) DOMException:未能在“元素”上执行“setAttribute”：“？”不是有效的属性名。

我根据我在故障排除部分的文档中看到的内容添加了wire:key代码，但它似乎没有帮助。它按应有的方式更新保存上的值，但是当它用新数据刷新dom时，它就不能工作了。

以下是冒犯的元素：

<div class="mb-3 col-md-4 ">
    <label for="state" class="form-label">State</label>
    <select wire:model.defer="location.state" class="form-select" 
        id="state" name="state">
        @foreach ($states as $state)
            <option 
                name="{{ $state->name }}" 
                id="{{ $state->code }}" 
                wire:key="{{ $state->id }}"
                value="{{ $state->code }}"
                @if (isset($location->state) 
                    && $location->state === $state->code) ? selected @endif
            >{{ $state->name }}
            </option>
        @endforeach
    </select>
</div>

Answer 1

你这里有个错误，

@if (isset($location->state) && $location->state === $state->code) 
    ? selected 
@endif

它尝试将?作为属性应用于元素，但?不是有效的属性。只需删除?即可。

也就是说，不能在Livewire中的selected元素上使用<select>属性来设置所选的值。您需要在组件中设置wire:model的值。这意味着您必须将@if(..) selected @endif从刀片中全部删除，并在组件中设置值，

public function mount() {
    $this->location['state'] = $state->code;
}