Component with named slots and data passed from iteration.

Hey people, I have a component named table. This component renders a list of things, say of users. I call this component like this:

 <x-tbl 
	    :th="['name', 'roles', 'email', 'actions']" 
     :td="['name', 'roles->name', 'email']" 
     :items="$users">
         <x-slot:actions>
             <a href="{{url('view/edit/currentUserID')}}" class="btn btn-blue">view</a>
             <a href="{{url('view/edit/currentUserID')}}" class="btn btn-blue">edit</a>
             <a href="{{url('view/edit/currentUserID')}}" class="btn btn-blue">delete</a>
         </x-slot>
 </x-tbl>

What I want to achieve is to have laravel replace the currentUserID in the actions slot for each user when it renders. Is that possible?

martinbean

3 years ago

Best Answer

Level 80

@terumi Not really, no. Because the slot has no knowledge of the item it is being rendered for.

You could may be do something funky where you pass callbacks as props that build the relevant URL based on a particular item:

<x-tbl
    :th="['name', 'roles', 'email', 'actions']"
    :td="['name', 'roles->name', 'email']"
    :items="$users"
    :view-url="fn ($user) => route('user.show', compact('user'))"
    :edit-url="fn ($user) => route('users.edit', compact('user'))"
    :delete-url="fn ($user) => route('users.destroy', compact('user'))"
/>

In your x-tbl component you can just call these where you want to display your actions, passing in the current item as an argument when invoking the callback:

<!-- resources/views/components/tbl.blade.php -->
@foreach($items as $item)
    <a href="{{ $viewUrl($item) }}" class="btn btn-blue">{{ __('view') }}</a>
    <a href="{{ $editUrl($item) }}" class="btn btn-blue">{{ __('edit') }}</a>
    <a href="{{ $deleteUrl($item) }}" class="btn btn-blue">{{ __('delete') }}</a>
@endforeach

Also as an aside, there’s really no need to abbreviate “table” as <x-tbl> in your component name. You’re not saving anything; <x-table> would have been fine.

1 like

Terumi

3 years ago

Level 5

That did the trick for me. Thank you!

1 like

Please or to participate in this conversation.