Livewire动作调用报invalid arrow-function arguments错误如何修复

报错原因 #

报错确实是=>符号导致的。Livewire的wire:click指令内的代码最终会被前端JavaScript解析，而PHP风格关联数组语法['key' => 'value']中的=>会被JS误判为箭头函数语法，从而触发语法错误。

可行修复方案 #

方案1：在Livewire组件内组装元数据（最推荐） #

把关联数组的组装逻辑移到Livewire组件的PHP方法中，模板仅传递基础标量参数，从根源避免在wire:click中出现=>符号。

1. 修改Livewire组件类代码：

// 对应Livewire组件的PHP代码
public function addToCart(string $id, string $productName, int $quantity, float $price, string $size)
{
    // 组件内部组装元数据数组
    $meta = ['size' => $size];
    // 调用购物车插件原有的添加逻辑
    \Cart::add($id, $productName, $quantity, $price, $meta);
}

2. 修改Blade模板按钮代码：

<button wire:click.prevent="addToCart('{{ $id }}', '{{ $product_name}}', 1, {{ $price }}, '{{ $size }}')">Add to Cart</button>

方案2：模板中用@json指令输出关联数组 #

如果需要直接在模板传递数组，可以用Laravel的@json指令把PHP数组转成JSON格式，JSON的键值分隔符为:，不会触发JS语法错误：

<button wire:click.prevent="addToCart('{{ $id }}', '{{ $product_name}}', 1, {{ $price }}, @json(['size' => $size]))">Add to Cart</button>

该方案会自动转义特殊字符，安全性更高。

方案3：提前绑定元数据为组件公共属性 #

如果元数据字段较多，可以提前把整个商品的所有参数赋值给Livewire组件的公共属性，点击时仅传递商品ID，组件内部直接读取属性获取对应商品信息、规格参数即可，模板代码更简洁。

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