Livewire:添加新记录后无法更新子组件
Livewire: Unable to update child components after adding new record
我有一个问题无法解决。我已经将组件结构设置为:
Post -> 评论 -> 评论回复
CommentReply 发出由 Post 捕获的事件。 Post 更新评论集合。
评论(模特)有自我关系作为回应。
现在如果评论是顶级的,视图就会更新。但是,如果响应关系已更新,则视图不会显示更新。如果我发出映射到 Comment
(组件)中的 $refresh
的刷新事件,组件将抛出错误:
Uncaught (in promise) TypeError: Cannot read property 'fingerprint' of null
更新
CommentReply.php
public function post_reply () {
...
$new_comment = $this->comment->response()->create($c);
$this->is_replying = false;
$this->emit('content:comments:replied', $new_comment);
}
Comment.php
(组件)
public $listeners = [
'content:comments:replied' => 'replied'
];
public function replied($comment) {
/*
received as array because type hinting
created error of array to string conversion
*/
$c = new CommentModel($comment);
$this->comment->responses->prepend($c);
}
comment.blade.php
<div>
@foreach($comment->responses as $response)
<div>
<div>
{{ $response->comment }}
</div>
<livewire:comment-reply :comment="$comment" :key="'comment-' . $response->id" />
</div>
@endforeach
</div>
comment-reply.blade.php
<div x-data="{ replying: @entangle('is_replying') }">
<button @click="replying = true;" x-show="!replying">Reply</button>
<div x-show="replying">
<textarea wire:model.defer="c.comment"></textarea>
<button wire:click="post_reply">Post</button>
</div>
</div>
这就是我的处理方式...
- 创建了一个组件
CommentView
并将评论显示逻辑移至该组件
comment-view.blade.php
<div>
<div>
{{ $comment->comment }}
</div>
<livewire:comment-reply :comment="$comment" />
</div>
Comment
组件现在有两个变量,$comment
和 $responses
,每次 CommentReply
发出 content:comments:replied
和 $responses
变量被刷新。
Comment.php
public $listeners = [
'content:comments:replied' => 'replied'
];
public function replied() {
$this->responses = $this->comment->responses()->orderBy('created_at', 'desc')->get();
}
comment.blade.php
<div>
<livewire:comment-view :comment="$comment" />
@foreach($responses as $r_comment)
<livewire:comment-view :comment="$r_comment" :key="'response-' . $r_comment->id" />
@endforeach
</div>
我有一个问题无法解决。我已经将组件结构设置为:
Post -> 评论 -> 评论回复
CommentReply 发出由 Post 捕获的事件。 Post 更新评论集合。
评论(模特)有自我关系作为回应。
现在如果评论是顶级的,视图就会更新。但是,如果响应关系已更新,则视图不会显示更新。如果我发出映射到 Comment
(组件)中的 $refresh
的刷新事件,组件将抛出错误:
Uncaught (in promise) TypeError: Cannot read property 'fingerprint' of null
更新
CommentReply.php
public function post_reply () {
...
$new_comment = $this->comment->response()->create($c);
$this->is_replying = false;
$this->emit('content:comments:replied', $new_comment);
}
Comment.php
(组件)
public $listeners = [
'content:comments:replied' => 'replied'
];
public function replied($comment) {
/*
received as array because type hinting
created error of array to string conversion
*/
$c = new CommentModel($comment);
$this->comment->responses->prepend($c);
}
comment.blade.php
<div>
@foreach($comment->responses as $response)
<div>
<div>
{{ $response->comment }}
</div>
<livewire:comment-reply :comment="$comment" :key="'comment-' . $response->id" />
</div>
@endforeach
</div>
comment-reply.blade.php
<div x-data="{ replying: @entangle('is_replying') }">
<button @click="replying = true;" x-show="!replying">Reply</button>
<div x-show="replying">
<textarea wire:model.defer="c.comment"></textarea>
<button wire:click="post_reply">Post</button>
</div>
</div>
这就是我的处理方式...
- 创建了一个组件
CommentView
并将评论显示逻辑移至该组件comment-view.blade.php
<div>
<div>
{{ $comment->comment }}
</div>
<livewire:comment-reply :comment="$comment" />
</div>
Comment
组件现在有两个变量,$comment
和$responses
,每次CommentReply
发出content:comments:replied
和$responses
变量被刷新。
Comment.php
public $listeners = [
'content:comments:replied' => 'replied'
];
public function replied() {
$this->responses = $this->comment->responses()->orderBy('created_at', 'desc')->get();
}
comment.blade.php
<div>
<livewire:comment-view :comment="$comment" />
@foreach($responses as $r_comment)
<livewire:comment-view :comment="$r_comment" :key="'response-' . $r_comment->id" />
@endforeach
</div>