从 child 发送 laravel livewire 事件到 parent 给出指纹错误
Sending laravel livewire event from child to parent gives fingerprint error
我在从 child 向 parent 容器发送 事件 时遇到此错误。我正在按照建议使用 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>
Child
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 可以跟踪每个单独的组件。
<div>
<h1>Im the container</h1>
@foreach([1,2,3] as $key=>$nbr)
@livewire('child', compact('nbr'), key($nbr))
@endforeach
</div>
这是在组件上完成的,而不是在视图中的根元素上完成的,这意味着它被错误地放置在 wire:key="{{ $nbr }}"
在您的子视图中。
我在从 child 向 parent 容器发送 事件 时遇到此错误。我正在按照建议使用 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>
Child
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 可以跟踪每个单独的组件。
<div>
<h1>Im the container</h1>
@foreach([1,2,3] as $key=>$nbr)
@livewire('child', compact('nbr'), key($nbr))
@endforeach
</div>
这是在组件上完成的,而不是在视图中的根元素上完成的,这意味着它被错误地放置在 wire:key="{{ $nbr }}"
在您的子视图中。