Possible typo $svg - Did you mean $svg?

Well yes, yes I did!

I've got a navbar-link component:

@props([
    'svg',
    'route',
])

<a href="{{ route($route) }}" class="w-full focus:text-teal-500 hover:text-teal-500 justify-center inline-block text-center pt-2 pb-1">
    <div {{ $svg->attributes->class(['inline-block']) }}>
        {{ $svg }}
    </div>
    <span class="tab tab-home block text-xs">{{ $slot }}</span>
</a>

And I'm using it like this:

<x-navbar-link route="home">
    <x-slot name="svg">
        <svg width="25" height="25" viewBox="0 0 42 42" class="inline-block mb-1">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                ...
            </g>
        </svg>
    </x-slot>
    Index
</x-navbar-link>

But then I get:

ErrorException

Undefined variable $svg (View: ...

Possible typo $svg

Did you mean $svg?

Which kinda doesn't make any sense.. at first glance at least.

What am I missing?

Update

So, I'm using the navbar-link component inside a navbar component, which I'm lastly referencing inside a layout called app. When I put the navbar-link inside navbar I get the above mentioned error. If I put the navbar-link outside (directly inside the app-layout component) it renders the named slot perfectly.

webrobert

4 years ago

Level 51

@michael.simso

you're not passing in svg as a prop

<x-navbar-link route="home" svg="" ...

You're defined svg as a named slot

<x-slot name="svg" ...

Remove it from props.


@props([ 'route'])

<a href="{{ route($route) }}" class="w-full focus:text-teal-500 hover:text-teal-500 justify-center inline-block text-center pt-2 pb-1">
    <div {{ $svg->attributes->class(['inline-block']) }}>
        {{ $svg }}
    </div>
    <span class="tab tab-home block text-xs">{{ $slot }}</span>
</a>

michael.simso

4 years ago

Level 7

@webrobert

Removed it, but it changed nothing

webrobert

4 years ago

Level 51

@michael.simso

my bad, I missed your reference to $svg->attributes, pretty sure this has to be $attributes ... why is it there anyway?

michael.simso

4 years ago

Level 7

@webrobert To add classes specific to that named slot? Thats my understanding of it :p

michael.simso

4 years ago

Level 7

So, doing it like this works (with a $slot inside the navbar component):

<x-navbar>
    <x-navbar-link route="home">
            <x-slot name="svg">
                <svg width="25" height="25" viewBox="0 0 42 42" class="inline-block mb-1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        ...
                    </g>
                </svg>
            </x-slot>
            Index
        </x-navbar-link>
</x-navbar>

Please or to participate in this conversation.