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

Question

我想打开一个模型来编辑项目。我在 div 上添加了 wire:click 但这只适用于 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>

Answer 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>

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

wire:click only works for the first item in foreach in livewire

laravel

laravel-livewire