Undefined variable Error while trying to access a var in blade component inside an HTML block.

Hey, everyone I have passed a $categories variable to a component like this in my create-product-form blade file:

and in my select-element blade component file I have received the categories variable as props like so:

running the above code it throws this error page:

But when I try to dd() or loop through the variable like so:

It works:

Here is my route file:

And Here is my controller:

So, when I try to use it Inside an HTML block it gives me Undefined variable error what is it that I'm doing wrong. I'm a beginner so any help would be greatly appreciated.

I went through the documentation for laravel and searched for a similar problems but couldn't find any solution for this problem.

vincent15000

3 years ago

Level 63

You need to declare the variable inside the component.

public $categories;

public function __construct($categories)
{
	$this->categories = $categories;
}

Using this, I'm not sure that you need to declare the props.

https://laravel.com/docs/9.x/blade#passing-data-to-components

sanjeevkamat

3 years ago

Level 4

@vincent15000 my components are anonyms components. Do i Still have to declare the variables inside the component?

1 like

vincent15000

3 years ago

Best Answer

Level 63

@sanjeevkamat Yes, you have to declare the variables.

Here is an example of how I have coded an anonymous select component. $items can be categories, rooms, months, ...

class Select extends Component
{
    public $selectedId;
    public $all;
    public $allLabel;
    public $items;
    public $field;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($selectedId = null, $all = true, $allLabel, $items, $field = 'name')
    {
        $this->selectedId = $selectedId;
        $this->all = $all;
        $this->allLabel = $allLabel;
        $this->items = $items;
        $this->field = $field;
    }
...
}

And the view.

<div {{ $attributes->merge(['class' => 'flex items-center']) }}>
    <select class="appearance-none w-full outline-none bg-gray-500 rounded text-white p-3">
        @if ($all)
            <option value="" wire:key="item-0">{{ $allLabel }}</option>
        @endif

        @foreach ($items as $item)
            <option value="{{ $item->id }}" wire:key="{{ 'item-'.$item->id }}" @selected($item['id'] == $selectedId)>{{ $item->$field }}</option>
        @endforeach
    </select>
    
    <span class="absolute right-8 text-white py-3 pointer-events-none"><i class="fa-solid fa-chevron-down"></i></span>
</div>

1 like

sanjeevkamat

3 years ago

Level 4

@vincent15000 Thanks for your answer vincent I will follow this pattern but the weird thing is the code that I had posted in my question is working now and I haven't changed anything in the code. I think it had something to do with view cache that was not recognizing the changes made to the component file. What do you think about that?

1 like

vincent15000

3 years ago

Level 63

@sanjeevkamat I don't know ... This morning I have coded a new blade component and I have applied the same as I suggested you and it works fine ;).

Don't forget to close the post please ;).

1 like

Please or to participate in this conversation.