Pass data from Vue loop to laravel component

Question

I am having this issue and I can not find my way around it without duplicating lots of code.

I have an array of entries coming from an axios request. Everything will go in an ul.

If I am doing it like this, everything is ok:

resource-index.blade.php

<ul>
    <li v-for="entry in entries" :key="entry.id" >
        <div>
            <div>
                <a :href="entry.links.show">
                    <x-button-icon color="gray-400">
                        @include('partials.svg.outline-eye')
                    </x-button-icon>
                    <span class="ml-3">{{ __('View') }}</span>
                </a>
            </div>
            <div>
                <a :href="entry.links.edit">
                    <x-button-icon color="gray-400">
                        @include('partials.svg.pencil')
                    </x-button-icon>
                    <span class="ml-3">{{ __('Edit') }}</span>
                </a>
            </div>
        </div>
    </li>
</ul>

However, in case I want to try to extract some of that stuff in different components, the details I am sending from Vue no longer get passed to the component.

resource-index.blade.php

<ul>
    <li v-for="entry in entries" :key="entry.id" >
        <div>
            <x-grid-list-item-button label="{{ __('View') }}" :href="entry.links.show">
                <x-slot name="icon">
                    @include('partials.svg.outline-eye')
                </x-slot>
            </x-grid-list-item-button>
            <x-grid-list-item-button label="{{ __('Edit') }}" :href="entry.links.edit">
                <x-slot name="icon">
                    @include('partials.svg.pencil')
                </x-slot>
            </x-grid-list-item-button>
        </div>
    </li>
</ul>

And here is the grid-list-item-button.blade.php

<div>
    <a href="{{ $href }}">
        @if($icon)
            <x-button-icon color="gray-400">
                {{ $icon }}
            </x-button-icon>
        @endif
        <span class="ml-3">{{ $label }}</span>
    </a>
</div>

I already tried:

moving the href="entry.links.show" in a named slot;
passing the data with v-bind: v-bind:href="entry.links.show";
::href="entry.links.show"

Can someone please tell what am I doing wrong or at least point me in the right direction with this?

Thanks!

Christian Holländer · Accepted Answer · 2021-05-01 20:15:33Z

If I got you right: You are trying to pass data from Vue.Js to Laravel-Components. Unfortunately this is not possible. Blade gets processed on the server-side where Vue.Js is not yet available. So the variable entry.links.show do not yet exist in Laravel (only available on client-side) and therefore cannot be passed to the Laravel-Component. After the HTML got rendered by Blade and passed to the Browser, Vue.Js can pick it up and replicate your template for the v-for and generate your list. At this point your 'link'-variables get available.

Solutions:

You could extract your code to a Vue.Js-Component rather than a Laravel-Component. This would be interpreted on client-side.
An other solution would be to generate this list through Blade so you could use Laravel-Components.

Thanks! Unfortunately, that makes a lot of sense. I will probably take option 1 and see how I can make that work nicely.

Collectives™ on Stack Overflow

Pass data from Vue loop to laravel component

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related