assign $attributes in nested Laravel 7 blade components

Question

With Laravel 7, I began to use View Components. I am trying to pass the $attributes variable from one component to another like:

x-modal component:

<div {{ $attributes->merge(['class' => 'modal fade']) }}>
   Something great...
</div>

x-modal-form component:

<x-modal {{ $attributes }}>
    Something great too
</x-modal>

In this case, I have an id property in the x-modal component like:

<x-modal-form id="aRandomId" title="Test"></x-modal-form>

But in this case, the id aRandomId is not spread to the x-modal component. I have an error "syntax error, unexpected 'endif' (T_ENDIF), expecting end of file" because of {{ $attributes }}

Do you know how to do that?

Answer 1

as per laravel documents :

All of the attributes that are not part of the component's constructor will automatically be added to the component's "attribute bag". This attribute bag is automatically made available to the component via the $attributes variable. All of the attributes may be rendered within the component by echoing this variable.

and in case of nested or use more than component in one view and want to use attribute bag so you put in this bag the common attribute and put manually unique attribute like so:

<x-modal {{ $attributes }}>
    <x-modal-form {{ $attributes }} id="aRandomId" title="Test">
     // code here
    </x-modal-form>
</x-modal>

and of course, The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

Answer 2

This behavior has been fixed in Laravel 8: #32576

You can now pass the $attributes variable from one component to another