Failed to refresh component on click in livewire

Question

Tried all the possible solution to refresh the component but failed. Is there any option not to push the new comments and refresh the $comments variable whatever it contains?

Want to refresh $comments and its relation with replies in the blade on click of the send button

Calling $refresh action on the send button but it doesn't seem to work. Even tried to re-render the component with $this->render(). This also fails.

<div>
    @foreach($comments as $item)
    <div class="row" @if($item->reply_id != null) style="margin-left:40px;" @endif>
        <div class="col-md-12">
            <div class="py-md-4 py-3 border_bottom" >
            <div class="row">
                <div class="col-md-1 col-sm-1 col-1">
                <div class="rating_person pt-3">
                    <img src="{{ isset($item->owner->profile_picture) ? asset($item->owner->profile_picture) : asset('images/default.jpg') }}">
                </div>
                </div>
                <div class="col-md-11 col-sm-12 col-12">
                <div class="rating_view_here_content_single_border">
                    <div class="rating_view_here_content_single">
                    <div class="rating_view_stars d-flex justify-content-between pt-3">
                        <div class="rating_view_heading">
                        <h4>{{ $item->owner->name }}</h4>
                        <div class="rating_wrapper">
                            <a href="#" class="grey_rating active-rating">
                            <i class="fa fa-star" aria-hidden="true"></i>
                            </a>
                            <a href="#" class="grey_rating active-rating">
                            <i class="fa fa-star" aria-hidden="true"></i>
                            </a>
                            <a href="#" class="grey_rating active-rating">
                            <i class="fa fa-star" aria-hidden="true"></i>
                            </a>
                            <a href="#" class="grey_rating active-rating">
                            <i class="fa fa-star" aria-hidden="true"></i>
                            </a>
                            <a href="#" class="grey_rating active-rating">
                            <i class="fa fa-star" aria-hidden="true"></i>
                            </a>
                        </div>
                        </div>
                        <span class="rating_days">{{ \App\Library\Helper::getTime($item->created_at) }}</span>
                    </div>
                    <div class="rating_comment_here pt-3">
                        <p>{{ $item->comment }}</p>
                        <p>
                        <a href="javascript:void(0)" class="reply" data-id="{{ $item->id }}" wire:click="toggleCommentBox({{ $item->id }}, 'true')">
                            <i class="fa fa-reply" aria-hidden="true"></i> <span>Reply</span>
                        </a>
                        </p>
                    </div>
                    @if($item_id == $item->id && $show=="true")
                        <div class="video_inner_form_wrapper commentBox-{{ $item->id }}">
                            <form wire:submit.prevent="sendReply" class="row">
                            <input type="hidden" name="reply_id" value="{{ $item->id }}">
                            <div class="comment_input col-md-8">
                            <input type="text" class="bluish_label video_inner_input @error('replyText') is-invalid @enderror" wire:model.lazy="replyText" placeholder="Write your comment here">
                            @error('replyText')
                            <div class="invalid-feedback">{{$message}}</div>
                            @enderror
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn_edit text-uppercase" wire:click="$refresh">Send</a>
                                <button type="button" class="btn_edit text-uppercase cancel" wire:click="toggleCommentBox({{ $item->id }}, 'false')">Cancel</a>
                            </div></form>
                        </div>
                    @endif
                    </div>
                </div> 
                </div>
            </div>
            </div>
            <livewire:frontend.discussion-chat :key="'chat-' . $item->id" :comments="$item->replies" :id="$model_id" :type="$model_type" />
        </div>
    </div>
    @endforeach
    </div>

Answer 1

Since none of the properties is updated, the livewire chat component will not refresh.

Possible solution is not to pass the list as a param but fetch it inside the chat component. Use events to trigger a refresh:

@click="$emit('discussion.chat.{{ $id }}.refresh')"

Inside frontend.discussion-chat have a

public function listeners(): array
{
    return [
        "discussion.chat.$this->id.refresh" => "reload"
    ];
}

public function reload(): void
{
    // E.g.
    $this->comments->fresh();
}