@foreach loop in Laravel blade causes x-text reference problem - Stack Overflow

admin管理员组

文章数量:1279009

The following code is in a @foreach loop in a form in a Laravel blade:

<div class="col-span-2 place-self-end flex items-center">
    <div class="form-switch">
        <input type="checkbox" id="change_inverter.{{ $loop->index}}"
            wire:model="toDos.{{ $loop->index}}.change_inverter" class="sr-only" />
        <label class="bg-slate-400 dark:bg-slate-700" for="change_inverter.{{ $loop->index}}">
            <span class="bg-white shadow-sm" aria-hidden="true"></span>
        </label>
    </div>
    <div class="font-semibold text-slate-800 dark:text-slate-100 italic mx-4"
    x-text="$wire.toDos.{{ $loop->index}}.change_inverter ? 'Yes' : 'No'">
    </div>
</div>
<div>
    @error('toDos.{{ $loop->index}}.change_inverter') <span
        class="text-sm font-normal text-rose-500 dark:text-rose-200">{{ $message }}</span>
    @enderror
</div>

The form works fine but the x-text doesn’t update and throws an Alpine Expression Error: Unexpected number.

If I change the x-text code to:

x-text="$wire.toDos[{{ $loop->index}}]['change_generator'] ? 'Yes' : 'No'"

the x-text updates without errors but if the form is updated it throws the error Cannot read properties of undefined (reading 'change_generator')

So far I’ve failed to come up with a work around to set the x-text property so no errors are thrown. Any thoughts welcome.

The following code is in a @foreach loop in a form in a Laravel blade:

<div class="col-span-2 place-self-end flex items-center">
    <div class="form-switch">
        <input type="checkbox" id="change_inverter.{{ $loop->index}}"
            wire:model="toDos.{{ $loop->index}}.change_inverter" class="sr-only" />
        <label class="bg-slate-400 dark:bg-slate-700" for="change_inverter.{{ $loop->index}}">
            <span class="bg-white shadow-sm" aria-hidden="true"></span>
        </label>
    </div>
    <div class="font-semibold text-slate-800 dark:text-slate-100 italic mx-4"
    x-text="$wire.toDos.{{ $loop->index}}.change_inverter ? 'Yes' : 'No'">
    </div>
</div>
<div>
    @error('toDos.{{ $loop->index}}.change_inverter') <span
        class="text-sm font-normal text-rose-500 dark:text-rose-200">{{ $message }}</span>
    @enderror
</div>

The form works fine but the x-text doesn’t update and throws an Alpine Expression Error: Unexpected number.

If I change the x-text code to:

x-text="$wire.toDos[{{ $loop->index}}]['change_generator'] ? 'Yes' : 'No'"

the x-text updates without errors but if the form is updated it throws the error Cannot read properties of undefined (reading 'change_generator')

So far I’ve failed to come up with a work around to set the x-text property so no errors are thrown. Any thoughts welcome.

• laravel-livewire

Share Improve this question Follow asked Feb 24 at 14:52 Mike CobbMike Cobb 311 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The x-text attibute value is javascript, so the second syntax you proposed should work, and I can't reproduce your error.
I suppose that in some circumstances an element addressed by $loop->index does not contain the key change_generator

Another option is to use the dot notation and the optional chaining syntax, since non numeric PHP associative array keys are converted to properties on the JS side:

<div x-text="$wire.toDos[{{ $loop->index}}]?.change_generator ? 'Yes' : 'No'">
</div>

本文标签： foreach loop in Laravel blade causes xtext reference problemStack Overflow