如何将VueJS变量传递到Laravel Blade路由

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中，但我无法弄清楚如何实现。

- twigg

---

你能展示一下在网页文件中定义的路由吗？ - Saad Suri

可能是重复的问题：如何将Vue变量放在Laravel括号内 - Emīls Gulbis

Answer 1

你可以尝试使用反引号(backtick)来实现。 对我有用，希望对你也有所帮助。

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

- Abdullah Al Mamun

---

好的答案并且易于使用。 - A.A Noman

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 和提供的“route”模板组装实际链接。

- mynd

Answer 3

您可以尝试在末尾添加ID来进行操作，例如：

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

我猜你正在遵循REST URI指南，那对你来说应该是可行的。

- Bruno Francisco

---

嘿，谢谢你的输入。这个不起作用，我尝试了类似的东西，但它失败了，因为路由期望有第二个参数（在这种情况下是id）[Route: admin.edit] [URI: admin/edit/{id}] 缺少必需的参数。 - twigg

@twigg 你可以将路由admin.edit的参数定义为可选，然后使用我在答案中提出的方法。虽然不是最佳选择，但现在这是我唯一看到的答案。如果需要更多解释，请告诉我，我可以编辑我的答案。 - Bruno Francisco

Answer 4

使用方法如下：

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

- Future Coder

---

嘿，感谢您的输入。这个不行，我尝试了类似的东西，但它失败了，因为路由需要第二个参数（在这种情况下是id）。[Route: admin.edit] [URI: admin/edit/{id}] 缺少必需的参数。 - twigg