Не удалось обновить компонент по щелчку мыши в livewire

#php #laravel-8 #laravel-livewire

Вопрос:

Перепробовал все возможные решения для обновления компонента, но потерпел неудачу. Есть ли какая-либо возможность не нажимать на новые комментарии и обновлять переменную $comments, что бы она ни содержала?

Хотите обновить $комментарии и их связь с ответами в колонке по нажатию кнопки отправить

Вызов действия $обновить на кнопке отправить, но, похоже, это не работает. Даже попытался повторно визуализировать компонент с помощью $this->render(). Это тоже не удается.

 <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">{{ AppLibraryHelper::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 amp;amp; $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>
 

Ответ №1:

Поскольку ни одно из свойств не обновляется, компонент чата livewire обновляться не будет.

Возможное решение состоит в том, чтобы не передавать список в качестве параметра, а извлекать его внутри компонента чата. Используйте события для запуска обновления:

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

Внутри frontend.discussion-chat есть

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

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

Комментарии:

1. это дочерний компонент, и теперь я установил событие и прослушиваю его в родительском с обновлением. Это хорошо работает. Хотя вашу идею я на самом деле не понял, если бы вы могли подробнее рассказать, это было бы здорово. Спасибо

2. я предлагаю вам хорошо отформатировать свое событие в $emit(‘обсуждение.чат.обновление, вставить сюда), а затем ожидать этого значения в функции перезагрузки reload($id)

3. также в livewire вы можете просто ввести переменную экземпляра, защищенную $listeners = [«обсуждение.чат.обновление» => «перезагрузка»]

4. @AliaJain У вас есть дочерний компонент, который получает идентификатор чата в качестве параметра и загружает все комментарии в красноречивую коллекцию. Дочерний компонент будет прослушивать событие обновления и перезагружать комментарии. Это событие может быть запущено из родительского или любого другого места в вашем приложении.

5. Хорошо, всем спасибо. Хотя проблема решена путем вызова события от ребенка и прослушивания родительского