故障排除

未匹配的标注

故障排除

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'
    ];
}

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~