I have a dropdown in my component that seems to be causing an error in Livewire.
Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '?' is not a valid attribute name.
I added the wire:key
code based on what I read in the docs under the troubleshooting section, but it didn't seem to help. It updates the value on save just like it should, but when it refreshes the dom with the new data, it's not working.
Here's the offending element:
<div >
<label for="state" >State</label>
<select wire:model.defer="location.state"
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>
CodePudding user response:
You have a typo here,
@if (isset($location->state) && $location->state === $state->code)
? selected
@endif
Where it tries to apply ?
as an attribute on the element, but ?
is not a valid attribute. Just remove the ?
.
That said, you cannot use the selected
property on <select>
elements in Livewire to set the selected value. You need to set the value of your wire:model
in your component. This means that you have to remove the @if(..) selected @endif
from your Blade entirely, and instead set the value in your component,
public function mount() {
$this->location['state'] = $state->code;
}