valentin_vranic's avatar

Livewire 3 select

I'm trying to reach the update/ing/ed lifecycle hooks when select option is changed by the user, but it doesn't seems to work.

                   <select
                        wire:model.boolean="form.overrideCid"
                        class="form-select w-25"
                        id="override-cid"
                    >
                        @foreach($form->callerIdTypes as $key => $value)
                            <option value="{{ $key }}">{{ __('messages.' . ucfirst($value)) }}</option>
                        @endforeach
                    </select>
0 likes
4 replies
LaryAI's avatar
Level 58

To utilize the update/ing/ed lifecycle hooks in Livewire when a select option is changed, you need to listen for the specific property update events. In your case, since you're using wire:model.boolean="form.overrideCid", you should define the corresponding methods in your Livewire component for the form.overrideCid property.

Here's an example of how you can define these methods:

class YourLivewireComponent extends Component
{
    public $form = [
        'overrideCid' => false,
        'callerIdTypes' => [],
        // ... other form properties
    ];

    // This method will be called before the property value is updated
    public function updatingFormOverrideCid($value)
    {
        // Do something before the property is updated
    }

    // This method will be called after the property value is updated
    public function updatedFormOverrideCid($value)
    {
        // Do something after the property is updated
    }

    // This method will be called after the property value is updated and all other Livewire updates are complete
    public function updated($name, $value)
    {
        if ($name === 'form.overrideCid') {
            // Do something after the form.overrideCid property is updated
        }
    }

    // ... other component methods
}

Make sure that your Livewire component class has the $form property and the updatingFormOverrideCid, updatedFormOverrideCid, and updated methods defined as shown above. These methods will be automatically called by Livewire when the form.overrideCid property changes.

Also, ensure that your Livewire component is properly included in your Blade view and that the callerIdTypes array is populated with the correct values.

If you're still facing issues, double-check that you're using the correct Livewire syntax and that your Livewire component is set up correctly. Remember that Livewire's lifecycle hooks are case-sensitive, so the method names must match the property name exactly, including the case.

Kortez12's avatar

Try to add this line to option attribute. wire:key="select-option-{{ $key }}"

valentin_vranic's avatar

@Kortez12 well, it doesn't seems to work.

Below my select I have a conditionally shown div

<div x-show="$wire.form.overrideCid">

Which on select change works as expected. But my select doesn't preserve the selected option.

valentin_vranic's avatar

@Kortez12 In my previous solution I made a wire:change to trigger the event like so:

wire:change="overrideCidChange($event.target.value)"

And in overrideCidChange method I've rewrote the value of overrideCid

I'm just curious is there a more convenient solution for this?

Please or to participate in this conversation.