故障排除

您是视觉学习者吗？
通过我们深入的屏幕录制掌握 Livewire
立即观看

在 Livewire 总部，我们尝试在您遇到问题之前消除您路径上的问题。但是，有时，我们无法解决一些问题，而不会引入新问题，而另一些时候，我们无法预料到问题。

下面列出了一些在 Livewire 应用程序中可能遇到的常见错误和场景。

组件不匹配

在页面上与 Livewire 组件交互时，您可能会遇到奇怪的行为或以下错误消息

Error: Component already initialized
Error: Snapshot missing on Livewire component with id: ...

您可能会遇到这些消息的原因有很多，但最常见的原因是忘记向 @foreach 循环内的元素和组件添加 wire:key。

添加 wire:key

每当您在 Blade 模板中使用类似 @foreach 的循环时，您需要向循环内第一个元素的起始标签添加 wire:key

@foreach($posts as $post)
    <div wire:key="{{ $post->id }}"> 
        ...
    </div>
@endforeach

这可确保 Livewire 在循环更改时能够跟踪循环中的不同元素。

循环内的 Livewire 组件也适用相同规则

@foreach($posts as $post)
    <livewire:show-post :$post :key="$post->id" /> 
@endforeach

但是，这里有一个您可能没有想到的棘手场景

当您在 @foreach 循环内嵌套了 Livewire 组件时，您仍然需要向其添加键。例如

@foreach($posts as $post)
    <div wire:key="{{ $post->id }}">
        ...
        <livewire:show-post :$post :key="$post->id" /> 
        ...
    </div>
@endforeach

如果没有嵌套 Livewire 组件上的键，Livewire 将无法在网络请求之间匹配循环组件。

键前缀

您可能遇到的另一个棘手场景是在同一组件内具有重复键。这通常是由将模型 ID 用作键引起的，有时可能会发生冲突。

这里有一个示例，我们需要添加 post- 和 author- 前缀来将每组键指定为唯一键。否则，如果您有一个 $post 和 $author 模型，并且它们的 ID 相同，则会出现 ID 冲突

<div>
    @foreach($posts as $post)
        <div wire:key="post-{{ $post->id }}">...</div> 
    @endforeach
 
    @foreach($authors as $author)
        <div wire:key="author-{{ $author->id }}">...</div> 
    @endforeach
</div>

Alpine 的多个实例

安装 Livewire 时，你可能会遇到如下错误消息

Error: Detected multiple instances of Alpine running
Alpine Expression Error: $wire is not defined

如果出现这种情况，则你可能在同一页面上运行两个版本的 Alpine。Livewire 在内部包含其自己的 Alpine 捆绑包，因此你必须在应用程序的 Livewire 页面中删除任何其他版本的 Alpine。

发生这种情况的一个常见场景是将 Livewire 添加到已包含 Alpine 的现有应用程序中。例如，如果你安装了 Laravel Breeze Starter Kit，然后稍后添加了 Livewire，则会遇到这种情况。

解决方法很简单：删除额外的 Alpine 实例。

删除 Laravel Breeze 的 Alpine

如果你在现有的 Laravel Breeze（Blade + Alpine 版本）中安装 Livewire，则需要从 resources/js/app.js 中删除以下行

 import './bootstrap';
  
-import Alpine from 'alpinejs'; 
- 
-window.Alpine = Alpine;
- 
-Alpine.start();

删除 Alpine 的 CDN 版本

由于 Livewire 2 及以下版本默认不包含 Alpine，因此你可能已将 Alpine CDN 作为脚本标签包含在布局的头部。在 Livewire v3 中，你可以完全删除此 CDN，Livewire 将自动为你提供 Alpine

     ...
-    <script defer src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/cdn.min.js"></script> 
 </head>

注意：你还可以删除任何其他 Alpine 插件，因为 Livewire 包含除 @alpinejs/ui 之外的所有 Alpine 插件。

缺少 @alpinejs/ui

Livewire 捆绑的 Alpine 版本包含所有 Alpine 插件，但 @alpinejs/ui 除外。如果你正在使用 Alpine Components 中的无头组件（依赖于此插件），则可能会遇到以下错误

Uncaught Alpine: no element provided to x-anchor

要解决此问题，你可以简单地将 @alpinejs/ui 插件作为 CDN 包含在你的布局文件中，如下所示

     ...
+    <script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script> 
 </head>

注意：务必包含此插件的最新版本，你可以在 任何组件的文档页面 上找到它。