故障排除

Dom区分问题

Livewire用户遇到的最常见的问题是与 Livewire 的 DOM 区分/拼接有关。 这是一个在每次组件更新后有选择地更新已更改，添加或删除的元素的系统。

在大多数情况下，该系统是可靠的，但在某些情况下Livewire无法正确跟踪更改。 幸运的是，发生这种情况时，您可以按照以下指南进行调试。

异常症状:

输入元素失去焦点
一个或一组元素突然消失
先前的交互式元素停止响应用户输入
加载指示器未触发

解决方案:

将 wire:key 添加到循环内的元素：

<ul>
    @foreach ($items as $item)
        <li wire:key="{{ $loop->index }}">{{ $item }}</li>
    @endforeach
</ul>

将 key() 添加到循环中的嵌套组件

<ul>
    @foreach ($items as $item)
        @livewire('view-item', ['item' => $item], key($loop->index))

        <!-- key() using Laravel 7's tag syntax -->
        <livewire:view-item :item="$item" :key="$loop->index">
    @endforeach
</ul>

在 dom 元素中使用 blade 语法 (@if, @error, @auth)

<input type="text" wire:model="name">
<div> @error('name'){{ $message }}@enderror </div>

添加 wire:key。 作为最后的措施，添加 wire:key 将直接告诉Livewire如何跟踪DOM元素。 过度使用此属性不是一个好主意，但是对于此类问题非常有用且功能强大。

<div wire:key="foo">...</div>
<div wire:key="bar">...</div>

校验问题

对于每个请求，Livewire都会执行”checksum”，但是在某些情况下使用数组时，即使数组中的数据相同，它也会引发异常。

因为在PHP中，数组可以在同一数组中以任何顺序包含字母键和数字键，但是 Javascript 将认为它是一个对象而不是数组，因为它不支持带有字母键的数组。 当Javascript创建对象时，它还会对键进行重新排序，它将数字键放在字母键之前。

当发送回JSON时，这会导致问题，因为 “checksum” 看起来会有所不同。

因此，请确保公共属性为数组的时，数字键位于字母字符键之前。

class HelloWorld extends Component
{
    public $list = [
        '123' => 456,
        'foo' => 'bar'
    ];
}