select 的 Livewire 未捕获（承诺）DOMException

Question

我的组件中有一个下拉菜单似乎导致 Livewire 出错。

Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '?' is not a valid attribute name.

我根据我在故障排除部分的文档中阅读的内容添加了 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 中的 <select> 元素上使用 selected 属性来设置所选值。您需要在组件中设置 wire:model 的值。这意味着您必须从您的 Blade 中完全删除 @if(..) selected @endif，而是在您的组件中设置值，

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

select 的 Livewire 未捕获（承诺）DOMException

Livewire uncaught (in promise) DOMException with select

laravel

laravel-livewire

laravel-8