Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Caroline07_98's avatar

Re-Render component with dynamic value

Sorry if I'm doing something wrong in this forum. I already asked a question here, it was answered, but I have another question regarding it, and I've already marked the forum entry as solved. I hope I'm not producing a duplicate now. 💁‍♀️

I have a select field and I want to dynamically render a Livewire component based on its value. With the help of @tykus 🙃, I can dynamically display the variable, but unfortunately, nothing changes when I pass it to the Livewire component.

I've read and tried a lot already, but I'm not getting any results. 🙇‍♀️

This is my view

<div>
    <div class="container-fluid my-3 py-3">
        <div class="row">
            <div class="col-sm-3">
                <label class="form-label" for="selectBox">Select Box:</label>
                <select class="form-control" id="selectBox" wire:model.live="selectedValue">
                    @foreach($hours as $hour => $label)
                        <option value="{{ $hour }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div>
        <!-- here the selected time is correct and changed after the input field changed. -->
        <p>Selected Hour: {{ $selectedValue }}</p>
    </div>

    <div>
            <livewire:appointments-grid
                @time-changed="$refresh"
                :starting-hour="$selectedValue"
                ending-hour="4"
                interval="30"
                hour-height-in-rems="4"
                event="{{$event->id}}"
            />
    </div>

</div>

This is my livewire

<?php
namespace App\Http\Livewire\LaravelExamples;

use App\Models\Event;
use Livewire\Component;

class SelectTest extends Component
{
    public $event;
    public $selectedValue = '10';
    public $hours;

    public function mount(Event $event)
    {
        $this->hours = [];
        for ($i = 0; $i <= 24; $i++) {
            $this->hours[$i] = $i . " Uhr";
        }

        $this->event = $event;
    }

    public function render()
    {
        return view('livewire.laravel-examples.working-schedules');
    }

    public function updatedSelectedValue($value)
    {
        $this->emit('time-changed');
    }
}

0 likes
2 replies
Caroline07_98's avatar

Woohoo, I did it. My missing term is called wire:key Each component will need its own unique wire:key 🙃 For everyone who is also looking for the solution

<livewire:appointments-grid
                @time-changed="$refresh"
                :starting-hour="$selectedValue"
                ending-hour="4"
                interval="30"
                hour-height-in-rems="4"
                :wire:key="$selectedValue"
                event="{{$event->id}}"
            />
Caroline07_98's avatar

Sorry for writing to myself, but maybe I'll help someone. @time-changed and updatedSelectedValue are not needed at all. It is enough to use the :wire:key.

Please or to participate in this conversation.