dynamic select field

Hello everyone! :) I'm relatively new to PHP and Livewire/Laravel. So far, I haven't worked on any real projects yet; I'm just practicing a bit on my own.

I'm currently trying to implement a select field and display the selected value in the HTML, but unfortunately, I'm already struggling with it. I've read a lot in the forum, but unfortunately, I can't figure out where the mistake lies.

Here's how my Livewire component looks like.

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class SelectTest extends Component
{
    public $selectedValue = 'option1'; 

    public function render()
    {
        return view('livewire.select-test', [
            'selectedValue' => $this->selectedValue,
        ]);
    }

    public function updatedSelectedValue($value)
    {
        $this->selectedValue = $value;
    }
}

And my Blade View is the following

<div>
    <label for="selectBox">Select Box:</label>
    <select id="selectBox" wire:model="selectedValue">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>

    <p>Selected Value: {{ $selectedValue }}</p>
</div>

When i load my page, the selectedValue is correct, but nothings changed when i set a value in the select field :(

i know, its a total beginner question, but in invest so much time in this and i cant explain it to me, why this dont work 🤷‍♀️

Maybe someone can help me and see what i doing wrong in a second 🙂

tykus

2 years ago

Best Answer

Level 104

Ok, a few things:

public properties on the Component class are available directly in the component view, so you don't need to pass data to the view
when you use the wire:model directive without the live modifier, the change does not get sent immediately to the backend.
you do not need the updatedSelectedValue method since the public property is reactive already, and you were only updating the already updated public property

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class SelectTest extends Component
{
    public $selectedValue = 'option1'; 

    public function render()
    {
        return view('livewire.select-test');
    }
}

<div>
    <label for="selectBox">Select Box:</label>
    <select id="selectBox" wire:model.live="selectedValue">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>

    <p>Selected Value: {{ $selectedValue }}</p>
</div>

Now, everything will be live and updating as expected.

1 like

Caroline07_98

2 years ago

Level 1

❤️❤️❤️

It works! Thank you so much! Especially for the great and detailed explanation!

Caroline07_98

2 years ago

Level 1

Your example really works perfectly! But I have another question, can I take this value that has now been changed and render a livewire component? I've read a lot now, a post is also sent, but the component is not loaded with the new values 🤷‍♀️

My Example

<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>
        <p>Selected Hour: {{ $selectedValue }}</p>
    </div>

    <div>
        <livewire:appointments-grid
            :starting-hour="$selectedValue"
            ending-hour="4"
            interval="30"
            hour-height-in-rems="4"
        />
    </div>

</div>

Please or to participate in this conversation.