Livewire数组输入wire:model绑定失效及点击更新报错求助

问题1：wire:model绑定不生效 #

原因及修复： #

• Livewire数组绑定建议使用数组[索引].属性的语法，避免Blade解析时的潜在问题；
• wire:key需使用稳定的唯一标识（如图片ID），而非循环索引，防止索引变化导致组件重新渲染异常；
• 确保$images中的元素是可访问name属性的对象（或数组），如果是Eloquent模型，需保证name在$fillable属性中。

修改后的视图代码片段：

<div class="card" wire:key="image-field-{{ $image->id }}">
    <img src="{{ $image->original_url }}" class="card-img-top" alt="{{ $image->name }}" />
    <input type="text" name="item-{{$index}}-name" id="item.{{$index}}.name" wire:model="images[$index].name" />

问题2：点击Update按钮出现语法错误 #

原因及修复： #

传递字符串参数时未添加引号，导致JavaScript将字符串识别为非法标识符。推荐使用@js指令将PHP变量转为合法的JavaScript字符串（自动处理特殊字符），或手动添加单引号。

修改后的按钮代码（二选一）：

方法1：手动添加单引号

<button wire:click="changeImageName('{{ $image->id }}', '{{ $image->name }}')">Update</button>

方法2：使用@js指令（更安全）

<button wire:click="changeImageName({{ $image->id }}, @js($image->name))">Update</button>

组件中对应方法示例： #

确保changeImageName方法正确接收参数并更新数据：

public function changeImageName($imageId, $newName)
{
    // 遍历更新$images数组中的对应元素
    foreach ($this->images as &$image) {
        if ($image->id == $imageId) {
            $image->name = $newName;
            break;
        }
    }
    unset($image); // 释放引用避免意外问题
}

完整修改后的视图代码： #

<div id="images">
    @foreach($images as $index => $image)
        <div class="card" wire:key="image-field-{{ $image->id }}">
            <img src="{{ $image->original_url }}" class="card-img-top" alt="{{ $image->name }}" />
            <input type="text" name="item-{{$index}}-name" id="item.{{$index}}.name" wire:model="images[$index].name" />
            <div class="card-footer">
                <button wire:click="changeImageName({{ $image->id }}, @js($image->name))">Update</button>
                {{ $image->name }}
            </div>
        </div>
    @endforeach
</div>

内容的提问来源于stack exchange，提问作者Cdevelop