如何将 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

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

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

我猜您正在关注REST URI指南，以便适合您。

Answer 3

使用像这样

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

Answer 4

你混合了两个不会像这样的概念。

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

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

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

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

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

你可以通过注入一个“route-template”来编译你的vue.js应用程序中的ressource并将href属性绑定到vue.js方法来实现这一点，如下所示：

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

然后，依据方法getEditLink(id)根据item的给定id和提供的“route”-template组装实际链接。