将数据从 Vue 循环传递到 laravel 组件

Question

我遇到了这个问题，如果不复制大量代码，我无法找到解决方法。

我有一组来自 axios 请求的条目。一切都将进入 ul。

如果我这样做，一切都很好：

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>   

但是，如果我想尝试在不同的组件中提取其中的一些内容，我从 Vue 发送的详细信息将不再传递给组件。

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>   

这里是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>

我已经试过了：

• 将href="entry.links.show" 移动到命名槽中；
• 使用 v-bind 传递数据：v-bind:href="entry.links.show";
• ::href="entry.links.show"

有人可以告诉我我做错了什么，或者至少可以为我指明正确的方向吗？

谢谢！

Answer 1

如果我没听错：您正试图将数据从 Vue.Js 传递到 Laravel-Components。不幸的是，这是不可能的。 Blade 在 Vue.Js 尚不可用的服务器端进行处理。所以变量 entry.links.show 在 Laravel 中还不存在（仅在客户端可用），因此不能传递给 Laravel 组件。在 HTML 被 Blade 渲染并传递给浏览器之后，Vue.Js 可以提取它并为v-for 复制您的模板并生成您的列表。此时您的“链接”变量可用。

解决方案：

1. 您可以将代码提取到 Vue.Js-Component 而不是 Laravel-Component。这将在客户端进行解释。
2. 另一种解决方案是通过 Blade 生成此列表，以便您可以使用 Laravel-Components。