framework: Blade attributes not being passed through to class

Laravel Version: 7.1.0
PHP Version: 7.4 | Vapor (2.5.3),

Description:

This is an issue only on Vapor currently for me. On my local valet install with PHP 7.4.3 it works fine.

Additional attributes passed into the x-blade tag are not being correctly passed into the class.

Failure Mode 1 “Undefined variable” exception is thrown.

class button extends Component
{
    public $colour;

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

<x-button class="def" colour="red">Save</x-button>

<button type="button" {{ $attributes->merge(['class' => "abc  ".$colour]) }}>
  {{ $slot }}
</button>

Failure Mode 2

The colour attribute is passed through as if it were in a normal HTML tag.
The public $c variable is not written to and/or is not accessible by the component.
Additional class attributes are merged correctly.

class button extends Component
{
    public $c;

    public function __construct($colour = null)
    {
        $this->c = $colour ?? 'blue';
    }
...

<x-button class="def" colour="red">Save</x-button>

<button type="button" {{ $attributes->merge(['class' => "abc  ".($c ?? 'undefined')]) }}>
  {{ $slot }}
</button>

This provides the html output of:

<button type="button" class="abc undefined def" colour="red">
    Save
</button>

but we were expecting

<button type="button" class="abc def red">
    Save
</button>

Steps To Reproduce:

Fresh install of Laravel on Vapor.
Create button component with the above snippets.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 26 (13 by maintainers)

Most upvoted comments

I had the same issue and finally I discovered the issue after half day of work. check the component folder should start with uppercase!

+11

basharsgnv on May 5, 2021

I was am experiencing the same issue. However in my case, the components were working as intended on local environment and failing on production.

I renamed the components as suggested by @booni3

and now everything works on my production environment.

njoguamos on Apr 8, 2020

Classes are in general PascalCase and you should always name them as such.

driesvints on Apr 9, 2020

Additionally, if you name your class Button.php, as opposed to button.php this works too. If you check the docs, all the examples are actually capitalized too.

https://laravel.com/docs/7.x/blade#components

@driesvints, not sure if this is intended behaviour or something that should be captured?

booni3 on Apr 1, 2020

@ahinkle It might be better to warn or not allow the wrong format rather than interpreting it 🤷‍♂️

adampatterson on Oct 27, 2020

I just fixed my issue by regestering my component in the Boot function of the AppServiceProvidor under a different name Blade::component('location-picker', locationPicker::class);

briavers on Apr 1, 2020

No one methods is helped me, but I found solve:

In app/Component/View/filename.php you must add

class NameOfComponent extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct(public readonly ?**type_of_your_variable** $**your_variable**)
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.card-author');
    }
}

KotKHPI on Oct 23, 2023

The following commands fixed my issue (I used “Anonymous Components”):

php artisan optimize:clear
composer dump-autoload

itas-bill-dou on Oct 19, 2021

I ran into this issue, too. Works in dev, fails in production.

Uppercasing the classname of the component did not fix it. Running composer dump-autoload --optimize did not fix it. Even adding Blade::component('component-name', ComponentName::class); into the AppServiceProvider class did not fix it.

The only thing that fixed it was adding Blade::component('component-name', ComponentName::class); to the AppServiceProvider and changing the name of the component to something like Blade::component('component-name-new', ComponentName::class);

Would be great if this bug got fixed so we can use Blade components reliably moving forward!

sblawrie on Sep 23, 2020