时间戳

首页 > 解决方案 > 将 laravel livewire 事件从孩子发送给父母会导致指纹错误

laravel - 将 laravel livewire 事件从孩子发送给父母会导致指纹错误

问题描述

将事件从子容器发送到父容器时出现此错误。我wire:key按照建议使用，但收到 JS 错误Cannot read property 'fingerprint' of null。任何想法我做错了什么？请看下面的例子。

容器

class Container extends Component
{
    public $listeners = [
        'submit'
    ];

    public function render()
    {
        return view('livewire.container');
    }

    public function submit()
    {
        //dd("The child says wow - it works!");
    }
}

有视野

<div>
    <h1>Im the container</h1>
    @foreach([1,2,3] as $nbr)
        @livewire('child', compact('nbr'))
    @endforeach
</div>

孩子

class Child extends Component
{
    public $nbr;

    public function mount($nbr)
    {
        $this->nbr = $nbr;
    }

    public function render()
    {
        return view('livewire.child');
    }

    public function submit()
    {
        $this->emit('submit', 'wow!');
    }
}

有视野

<div wire:key="{{ $nbr }}">
    Hey im a child
    <button wire:click="submit">submit</button>
</div>

标签： laravellaravel-livewire

解决方案

在循环中定义 Livewire 组件时，您需要给它们一个键，以便 Livewire 可以跟踪每个单独的组件。

<div>
    <h1>Im the container</h1>
    @foreach([1,2,3] as $key=>$nbr)
        @livewire('child', compact('nbr'), key($nbr))
    @endforeach
</div>

这是在组件上完成的，而不是在视图中的根元素上完成的，这意味着它被错误地放置wire:key="{{ $nbr }}"在您的子视图中。

推荐阅读