如何将 VueJS 变量传递给 Laravel 刀片路由

Question

我在 VueJS 中循环一个 JSON 数组并将每个项目输出到屏幕，但我需要创建一个到资源控制器的链接/路由，并为每一行返回 ID，如下所示：

<tr v-for="item in searchResults.group">
    <td>
        <a href="{{ route('admin.edit', @{{ item.id }} ) }}"><button type="button" class="btn btn-info btn-sm">Edit</button></a>

所以我尝试像@{{ item.id }} 那样将变量放入路由但得到错误：

syntax error, unexpected '{' (View: /application/resources/views/admin/edit.blade.php)

我这样做的方式显然不是正确的方式，但我在文档中找不到任何东西来实现这一点。

---

编辑：

对此的进一步说明。路由函数需要第二个参数，在这种情况下，是要编辑的项目的 ID。在纯 PHP/Blade 我有这个并且它可以工作：

<a href="{{ route('admin.edit', $item->id ) }}"><button type="button" class="btn btn-info btn-sm">Reduce</button></a>

对于动态搜索页面，我需要以某种方式将第二个参数从 vuejs 变量传递到 Blade/php，但我就是不知道该怎么做。

Answer 1

你可以用反引号试试这个。

它对我有用。希望对你有帮助。

<a :href=`{{ route('admin.edit', '') }}/${item.id}`>

Answer 2

您将两个不能像这样结合在一起的概念混合在一起。

刀片模板在服务器端呈现，而与 vue.js 相关的标记部分将在客户端（例如“浏览器”）进行解析。

因此，在刀片表达式中引用 item 的属性将失败（就像它一样）。

<a href="{{ route('admin.edit', @{{ item.id }} ) }}"

route(...) 指的是与刀片相关的表达式，item 应该是 vue.js 应用程序的一部分。

您需要做的是在循环您的searchResult.group 后动态创建链接以在您的 vue.js 应用程序中编辑资源。

您可以通过将用于编辑资源的“路由模板”注入您的 vue.js 应用程序并将 href 属性绑定到 vue.js 方法来实现此目的，如下所示：

<tr v-for="item in searchResults.group">
    <a v-bind:href="getEditLink(item.id)">Edit</a>
....

根据getEditLink(id) 的方法然后根据item 的给定id 和提供的“路由”模板组装实际链接。

Answer 3

您可以尝试将 id 附加到末尾，如下所示：

{{ route('admin.edit') }}/@{{ item.id }}

我猜您正在遵循 REST URI 指南，以便为您工作。

Answer 4

这样使用

 <a href="{{ route('admin.edit') }}?course_id=@{{ item.id }}">Click</a>