Search code examples
laravelcomponentslaravel-blade

Changing default value of laravel blade component props not working

I am trying to follow the guide on the laravel series for component props.

I am trying to pass the value of 1 to the component to set the color.

<x-button.kanban-tag name="{{$tag->title}}" color_id="1"/>

@props([
    'name' => 'New Tag',
    'color_id' => '3',
    'colors' => [
        '1' => 'bg-blue-500 hover:bg-blue-600 text-white',
        '2' => 'bg-red-500 hover:bg-red-600 text-white',
        '3' => 'bg-indigo-500 hover:bg-indigo-600 text-white',
        '4' => 'bg-green-500 hover:bg-green-600 text-white',
        '5' => 'bg-yellow-500 hover:bg-yellow-600 text-white'
    ],
 
])

<div {{ $attributes->merge(['class' => "{$colors[$color_id]} flex space-x-1 border rounded px-2 py-1 m-1 transition duration-500 ease select-none focus:outline-none focus:shadow-outline text-sm font-semibold tracking-widest"]) }} >
        {{$name}}
</div>

But the color that is being rendered is the default value of 3 which is indigo in this case.

This is the example I am following, so I don't get what the issue is =/ enter image description here

Honestly not seeing why the prop for name is working, but not for color_id

Solution

  • If you use @props you should remove component class form App/View/Components.

    There is another reason. Use camelCase property names. instead of color_id try colorId.