Блог

Я создал компонент livewire с некоторыми полями ввода, добавил цикл for к родительскому компоненту с дочерним компонентом внутри.

 @for($i = 0; $i < $count; $i  )
    @livewire('dashboard.profile.garage-service-list-item', ['garage' => $garage], key($i))
@endfor
  

У каждого дочернего компонента есть кнопка удаления. Как может выглядеть метод для этой кнопки?

На ум приходят два способа. Во-первых, вы отображаете пустое представление, если элемент удаляется, или запускаете событие для обновления всех компонентов, которые отображаются в этом цикле.

1: Обновление родительского

Предполагается, что родительский компонент является компонентом Livewire.

В вашем родительском элементе вы можете прослушать событие для обновления. Просто объявите слушателя в своем родительском компоненте (компоненте, в котором есть ваш @for цикл), добавив следующее.

 protected $listeners = ['refreshParentComponent' => '$refresh'];
  

refreshParentComponent это имя события, вы могли бы переименовать его во что-то более подходящее (это имя, вероятно, не очень подходящее имя), и $refresh это действие — а в Livewire $refresh действие — это волшебное действие, которое просто обновляет компонент целиком, по сути, перерисовывая его. Это будет означать, что после удаления элемента вы получите новый набор данных и отобразите все это с этими данными.

Чтобы вызвать событие, в вашем ProfileGarageServiceListItem классе, где вы удаляете элемент, вы можете запустить или отправить это конкретное событие — и вы можете отправить его вверх. Вы можете сделать это, вызвав emitUp метод.

 $this->emitUp('refreshParentComponent');
  

2. Рендеринг пустого HTML-блока

Например, вы можете добавить логическое свойство к своему компоненту Livewire public $show = true; . Затем в основе вашего garage-service-list-item представления вы начинаете с проверки этого свойства.

 <div>
    @if ($show) 
        <!-- The rest of your component here -->
    @endif
</div>
  

Затем в методе, в котором вы удаляете компонент, просто установите $this->show = false; и все готово! Компонент будет отображать пустой <div> блок.

• События Livewire
• Свойства Livewire