LiveWire数据绑定问题：Uncaught ReferenceError及交互失效求助

问题现象 #

• 控制台抛出Uncaught ReferenceError: LiveWire is not defined
• 输入框通过wire:model="name"绑定后，值变更时页面显示的Hello {{ $name }}未同步更新

排查与解决步骤 #

1. 补全LiveWire依赖（Alpine.js） #

LiveWire 2.x及以上版本依赖Alpine.js，缺少该依赖会导致脚本初始化失败。在@livewireScripts前引入Alpine.js：

<body>
    @livewire('hello-world')

    <!-- 引入Alpine.js -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    @livewireScripts
</body>

2. 校验组件与视图路径 #

• 组件文件HelloWorld.php需放置在app/Http/LiveWire/目录下，命名空间为App\Http\LiveWire：

  namespace App\Http\LiveWire;
  
  use Livewire\Component;
  
  class HelloWorld extends Component
  {
      public $name = 'Ugur';
      
      public function render()
      {
          return view('livewire.hello-world');
      }
  }
  

• 视图文件hello-world.blade.php需放置在resources/views/livewire/目录下，确保文件名与组件视图引用一致。

3. 清除缓存 #

执行以下命令清除Laravel及LiveWire的缓存，避免旧缓存导致的加载异常：

php artisan cache:clear
php artisan view:clear
php artisan livewire:clear

4. 排查脚本冲突 #

若页面引入了jQuery等第三方脚本，可能会与LiveWire的DOM操作冲突。可暂时移除第三方脚本测试，确认是否为冲突导致。

验证 #

完成上述步骤后，重新加载页面：

• 控制台不再出现LiveWire is not defined错误
• 在输入框中修改内容，页面的Hello {{ $name }}会实时同步更新

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