Wire:click stop working

#1

Hello,

I’m currently using livewire to implement a work schedule with days and hour slots.
this is what i’m trying to achieve:
Monday
8:00 - 10:00
12:00 - 17:00
Tuesday
8:00 - 10:00
12:00 - 17:00
…

I’ve used the excellent code from Freek https://freek.dev/1609-building-complex-forms-with-laravel-livewire-in-oh-dear
but i’m getting trouble to have all working together, currently, the behavior is when i click the “Add period”, i can see the added elements, i can delete them but after all elements deleted I cannot add new!
I don’t see any request going to the backend so seems to me a javascript issue

Thanks already for your support.

here is the code:

For Days:

class WorkscheduleDay extends Component
{
    public $day_name;
    public $array_slots = [];

    public function render()
    {

        return view('livewire.workschedule.workschedule-day');
    }

    public function mount($dayname, $arrayslots)
    {
        $this->day_name = $dayname;
        $this->array_slots = $arrayslots;
    }
}

The livewire

<div>
<div wire:key="{{$day_name}}" id="{{$day_name}}">
    <div class="">{{$day_name}}</div>

    <livewire:workschedule-hourslot :slots="$array_slots">

</div>
</div>

For Hours

class WorkscheduleHourslot extends Component
{
    public $slots = [];

    public function render()
    {
        return view('livewire.workschedule-hourslot');
    }

    public function mount(array $slots)
    {

    }

    public function addSlot(): void
    {

        if (! $this->canAddMoreSlots()) {
            return;
        }

        $this->slots[] = ['name' => '', 'value' => ''];
    }

    public function removeSlot(int $i): void
    {
        unset($this->slots[$i]);

        $this->slots = array_values($this->slots);
    }


    public function canAddMoreSlots(): bool
    {
        return count($this->slots) < 5;
    }

}

Livewire

<div>

    @foreach($slots as $i => $slot)
        <div class="flex mb-2">
            <div class="flex flex-col flex-grow">
                <div class="mr-2 flex-grow">
                    <input
                        value="{{ $slot['name'] }}"
                        placeholder="Hours"
                        type="text"
                        name="hours[{{ $i }}][name]"
                    >
                </div>

            </div>

            <div class="flex flex-col flex-grow">
                <div class="mr-2 flex-grow">
                    <input
                        value="{{ $slot['value'] }}"
                        placeholder="Header value"
                        type="text"
                        name="hours[{{ $i }}][value]"
                    >
                </div>

            </div>

            <div class="button is-secondary items-center">
                <div wire:click.prevent="removeSlot({{ $i }})" class="text-xs text-gray-500">
                    delete
                </div>
            </div>
        </div>
    @endforeach


        @if ($this->canAddMoreSlots())
            <div wire:click.prevent="addSlot" class="button is-secondary mr-4">
               add new period
            </div>
        @endif
</div>
#2

Ok so after few hours of experimentation i found that the foreach of the hour slots must be inside a 

<div>
    <div> --> TO BE ADDED
        @foreach($slots as $i => $slot)
            <div class="flex mb-2">
                <div class="flex flex-col flex-grow">
                    <div class="mr-2 flex-grow">
                        <input
                            value="{{ $slot['name'] }}"
                            placeholder="Header name"
                            type="text"
                            name="http_client_headers[{{ $i }}][name]"
                        >
                    </div>

                </div>

                <div class="flex flex-col flex-grow">
                    <div class="mr-2 flex-grow">
                        <input
                            value="{{ $slot['value'] }}"
                            placeholder="Header value"
                            type="text"
                            name="http_client_headers[{{ $i }}][value]"
                        >
                    </div>

                </div>

                <div class="button is-secondary items-center">
                    <div wire:click.prevent="removeSlot({{ $i }})" class="text-xs text-gray-500">
                        Supprimer
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @if ($this->canAddMoreSlots())
        <div wire:click.prevent="addSlot" class="button is-secondary mr-4">
            Ajouter une période
        </div>
    @endif
</div>
1 Like