Livewire 3与Alpine.js向导：$wire表达式意外Token '}'错误排查

问题背景 #

• 环境：Laravel v11.9、Livewire v3.5、PHP v8.3、Alpine.js 3.4.2
• 场景：采用Livewire组件构建向导系统（主向导组件+各步骤独立Livewire组件）
• 错误现象：点击第一步的「Save」按钮尝试跳转至下一步时，浏览器控制台抛出 Alpine Expression Error: Unexpected token '}'，错误指向不完整表达式 $wire.

已尝试操作 #

• 确认Alpine.js的x-data初始化逻辑无问题
• 尝试用$wire.call()、@this.call()两种方式调用stepCompleted方法

错误成因 #

1. Alpine事件绑定表达式不完整：错误提示中的$wire.说明模板里的事件绑定只写了$wire前缀，缺少后续方法名或调用括号，比如写成了@click="$wire."，导致Alpine解析时触发语法错误。
2. Livewire与Alpine语法混用错误：Livewire 3中@this是Blade渲染指令，不能直接在Alpine运行时表达式中使用；而$wire作为Alpine全局对象，调用方法时必须加括号（如$wire.stepCompleted()），否则会被视为属性访问，触发解析异常。
3. 跨组件通信语法遗漏：若第一步组件需调用主向导组件的跳转方法，可能未正确声明组件间通信逻辑，或模板中写错了方法调用路径。

修复方案 #

1. 修正Alpine事件绑定的完整表达式 #

确保按钮的@click事件使用完整的$wire方法调用：

<!-- 第一步组件视图中的Save按钮示例 -->
<button type="button" x-on:click="$wire.saveAndNext()">Save & Next</button>

• 必须添加方法调用的括号()，否则Alpine会将$wire.saveAndNext视为属性访问，触发语法错误。

2. 采用Livewire事件系统实现跨组件通信 #

避免直接跨组件调用方法，改用Livewire事件系统实现步骤跳转：

主向导组件示例

<?php

namespace App\Livewire\Wizard;

use Livewire\Component;

class MainWizard extends Component
{
    public $currentStep = 1;

    public function goToNextStep()
    {
        $this->currentStep++;
    }

    public function render()
    {
        return view('livewire.wizard.main-wizard');
    }
}

第一步组件示例

<?php

namespace App\Livewire\Wizard;

use Livewire\Component;

class StepOne extends Component
{
    public function saveAndNext()
    {
        // 执行第一步的表单验证、数据保存逻辑
        $this->dispatch('step-completed', step: 1);
    }

    public function render()
    {
        return view('livewire.wizard.step-one');
    }
}

主向导视图中监听事件

<div>
    @switch($currentStep)
        @case(1)
            <livewire:wizard.step-one />
            @break
        @case(2)
            <livewire:wizard.step-two />
            @break
    @endswitch
</div>

<script>
document.addEventListener('livewire:initialized', () => {
    Livewire.on('step-completed', () => {
        @this.goToNextStep();
    });
});
</script>

3. 排查模板中的语法错误 #

全面检查所有Blade模板中的Alpine指令：

• 确保x-on:click、x-bind等指令的表达式完整，无遗漏括号、引号等符号
• 禁止在Alpine表达式中混用Blade指令（如@this），Blade指令需在服务器渲染阶段解析完成

4. 确保Alpine与Livewire版本兼容 #

Livewire 3内置Alpine.js，若手动引入了外部Alpine版本（如3.4.2）：

• 建议移除手动引入的<script>标签，直接使用Livewire内置的Alpine.js
• 若必须指定版本，在config/livewire.php中配置alpine_version为3.4.2

验证步骤 #

1. 清除浏览器缓存后重新加载页面
2. 打开控制台确认无语法错误
3. 点击Save按钮，验证步骤跳转功能正常

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