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

问题描述

从子容器向父容器发送事件时出现此错误.我按照建议使用 wire:key ，但收到JS错误无法读取null的属性'fingerprint'.有什么想法我做错了吗?请参见下面的示例.

Im getting this error when sending an event from child to parent container. I am using wire:key as recommended but get the JS error Cannot read property 'fingerprint' of null. Any ideas what I am doing wrong? Please see example below.

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>

推荐答案

在循环中定义Livewire组件时，需要为它们提供一个键，以便Livewire可以跟踪每个单独的组件.

When defining Livewire components in a loop, you need to give them a key, so Livewire can keep track of each individual component.

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

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

This is done on the component, not on the root-element in the view, meaning that its incorrectly placed with wire:key="{{ $nbr }}" being in your child-view.

这篇关于从孩子向父母发送laravel livewire事件会导致指纹错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！