1

I have a blade. file with multiple livewire components:

<section class="">
   <h2 id="page-goal">Add A New Item</h2>
    @livewire('libraries.catalog-item-create', ['categories' => $categories, 'library' => $library])
    @livewire('libraries.generic-publisher-create')
    @livewire('libraries.generic-title-create')
    @livewire('libraries.generic-artist-create')
    @livewire('libraries.generic-tempo-create')
</section>

Each component is an input form that ends with a 'Next' button, ex:

<button
    wire:click="nextStep()"
    class="@if($next) bg-black text-white cursor-pointer @else bg-gray-500 text-gray-300 cursor-default @endif rounded w-20"
    @if(! $next) disabled @endif >
    Next
</button>

However, on the generic-artis-create form, I want to use the $emit format as follows:

<div class="flex flex-row">
    <button
        wire:click="$emit('nextStep','tempo')"
        class="@if(count($artists) || ($artistObject && $artistTypeObject)) bg-black text-white cursor-pointer @else bg-gray-500 text-gray-300 cursor-default @endif rounded w-20"
        @if(! $next) disabled @endif >
        Next
    </button>
</div>

I have a 'nextStep()' method in each Component which I use to advance the user through the components. But, when I click the Next button with the direct $emit(), nothing happens, i.e. there's no Network activity. Livewire is brilliant, so I know I'm doing something wrong. Any and all help is appreciated!

rretzko
  • 41
  • 3

1 Answers1

1

Sometimes asking the question leads to the answer. I was not completing the action which changed the state of the '$next' property, so the button was disabled. Fixing this allowed the $emit('name','value') to work.

rretzko
  • 41
  • 3