wire:click 仅适用于 livewire 中 foreach 中的第一项答案

【问题标题】：wire:click only works for the first item in foreach in livewirewire:click 仅适用于 livewire 中 foreach 中的第一项
【发布时间】：2021-08-19 15:47:50
【问题描述】：

我想为编辑项打开一个模型。我添加了wire:click on a div，但这仅适用于foreach的第一项。

Livewire 方法

public function selectMealPlan($mealId)
{
   $this->dispatchBrowserEvent('openEditMealModal');
}

查看文件

@foreach ($meal_plans as $meal)
    <div class="meals-plan-item">
        <div class="meals-plan-item-type">
            <div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
            <div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
        </div>
        <div class="meals-plan-item-names">
            <div class="meals-plan-item-label">MEAL NAMES:</div>
            <div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
        </div>

        <div class="meals-plan-item-actions">
            <div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
                <i class="fas fa-pencil"></i>
            </div>

            <div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
                <i class="fas fa-trash"></i>
            </div>
        </div>

    </div>
@endforeach

<script>
  window.addEventListener('openEditMealModal', function() {
    alert('hello');
  })
</script>

【问题讨论】：

标签： laravel laravel-livewire

【解决方案1】：

组件应该只有一个根元素，例如div：

<div class="meals-plan-item">
    @foreach ($meal_plans as $meal)

    <div class="meals-plan-item-type">
        <div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
        <div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
    </div>
    <div class="meals-plan-item-names">
        <div class="meals-plan-item-label">MEAL NAMES:</div>
        <div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
    </div>

    <div class="meals-plan-item-actions">
        <div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
            <i class="fas fa-pencil"></i>
        </div>

        <div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
            <i class="fas fa-trash"></i>
        </div>
    </div>
    @endforeach
</div>

【讨论】：