Question

Livewire 未捕获（承诺）DOMException 与选择

2022-02-24

1611

laravel laravel-8 laravel-livewire

我的组件中有一个下拉菜单，似乎导致 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;
}

Answer 2

我遇到了同样的错误 - 就我而言，它是通过在经过身份验证的上下文中调用 livewire 组件来解决的 - 它失败是因为它正在调用登录（由于从来宾上下文调用）

如果它对您不起作用，请忽略，但它帮我解决了问题。