HubertVanD's avatar

First option of select dropdown returns NULL

I have a Livewire component which contains a dropdown menu filled by values from the database:

<form wire:submit.prevent='createIdea' action="#" method="POST" >
                    
            <div>
                <select wire:model="category" name="category_add" id="category_add">
                    @foreach($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>

The dropdown shows then the name of the first category (in my case with $category->id of 1)..

After pressing "submit" and reading $this->category in my model, I would expect to find a value of 1. But instead I get NULL. Even if I explictely select the first item in the dropwon, I still get NULL.

What am I doing wrong?

0 likes
7 replies
HubertVanD's avatar

@webrobert

<?php

namespace App\Http\Livewire;

use App\Models\Idea;
use App\Models\Vote;
use Livewire\Component;
use App\Models\Category;
use Illuminate\Http\Response;


class CreateIdea extends Component
{
    public $title;
    public $category;
    public $description;

    protected $rules = [
        'title' => 'required|min:4',
        'category' => 'required|integer|exists:categories,id',
        'description' => 'required|min:4'
    ];


    public function createIdea()
    {

        if (auth()->guest()) {
            abort(Response::HTTP_FORBIDDEN);
        }
        dd($this->category);
        $this->validate();

        $idea = Idea::create([
            'user_id' => auth()->id(),
            'category_id' => $this->category,
            'status_id' => 1,
            'title' => $this->title,
            'description' => $this->description
        ]);

        Vote::create([
            'user_id' => auth()->id(),
            'idea_id' => $idea->id
        ]);


        $this->emit('ideaWasCreated', 'The idea was created successfully!');

        $this->reset();

        return redirect()->route('idea.index');
    }

    public function render()
    {
        return view('livewire.create-idea', ['categories' => Category::all()]);
    }

}
AbdulRehmanDar's avatar

You have to give the first value of the categories by default to the category property.

solution 1:

$this->categories = Category::all();
$this->category = $this->categories->first()->id;

solution 2:

Or add an empty option

<option value=""> Select Category</option>
critic's avatar

This is not the solution, this is bug, because the base code is html and php and there it works. just like the first element of html + php is sent with it, it should also work in livewire

Snapey's avatar

as you have been advised, the html is synced with the state of the livewire component. If the state in the component attribute is null, then the state of the select is also null. The 'bug' is on the html side. When its value is null, and there is no matching option then it has no choice but to show the first option. This does not mean the first option it is selected.

Please or to participate in this conversation.