[英]How to pass a VueJS variable into a Laravel blade route
I'm looping over a JSON array in VueJS and outputting each item to the screen but I need to create a link/route to a resource controller with the ID being returned for each row like so:我在 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>
So I've tried putting the variable into the route like so @{{ item.id }}
but get the error:所以我尝试将变量放入路由中,如
@{{ item.id }}
但得到错误:
syntax error, unexpected '{' (View: /application/resources/views/admin/edit.blade.php)
The way I have done it is not the correct way obviously but I can't find anything in the documentation to achieve this.我这样做的方式显然不是正确的方式,但我在文档中找不到任何东西来实现这一点。
EDIT:编辑:
Further input on this.对此的进一步投入。 The route function requires a second parameter, in this case, the ID of the item to edit.
路由函数需要第二个参数,在本例中是要编辑的项目的 ID。 In pure PHP/Blade I have this and it works:
在纯 PHP/Blade 中,我有这个并且它有效:
<a href="{{ route('admin.edit', $item->id ) }}"><button type="button" class="btn btn-info btn-sm">Reduce</button></a>
For the dynamic search page, I need to somehow pass that second parameter into blade/php from a vuejs variable but I just can't work out how to do it.对于动态搜索页面,我需要以某种方式将第二个参数从 vuejs 变量传递到blade/php,但我就是不知道怎么做。
You can try this using backtick.您可以使用反引号尝试此操作。
Its works for me.它对我有用。 I hope it's helpful for you.
我希望它对你有帮助。
<a :href=`{{ route('admin.edit', '') }}/${item.id}`>
You can try by appending the id to the end like so: 您可以尝试将id附加到末尾,如下所示:
{{ route('admin.edit') }}/@{{ item.id }}
I'm guessing you are following a REST URI guides so that would work for you. 我猜您正在关注REST URI指南,以便适合您。
使用像这样
<a href="{{ route('admin.edit') }}?course_id=@{{ item.id }}">Click</a>
You are mixing two concepts that won't go together like this. 你混合了两个不会像这样的概念。
The blade template is rendered server-side, whereas the parts of your vue.js related markup will be parsed on the client side (eg "browser"). 刀片模板在服务器端呈现,而vue.js相关标记的部分将在客户端进行解析(例如“浏览器”)。
Because of that, referencing a property of item
within a blade expression will fail (as it does). 因此,在刀片表达式中引用
item
的属性将失败(就像它一样)。
<a href="{{ route('admin.edit', @{{ item.id }} ) }}"
route(...)
refers to an expression that is related to blade, an item
is supposed to be a part of your vue.js app. route(...)
指的是与blade相关的表达式,一个item
应该是你的vue.js应用程序的一部分。
What you need to do is to dynamically create the link for editing the ressource within your vue.js app once you loop your searchResult.group
. 您需要做的是在循环
searchResult.group
动态创建用于在vue.js应用程序中编辑资源的链接。
You could achieve this by injecting a "route-template" for editing the ressource into your vue.js app and bind the href property to a vue.js method, like this: 你可以通过注入一个“route-template”来编译你的vue.js应用程序中的ressource并将href属性绑定到vue.js方法来实现这一点,如下所示:
<tr v-for="item in searchResults.group">
<a v-bind:href="getEditLink(item.id)">Edit</a>
....
The according method getEditLink(id)
then assembles the actual link based on the given id of item
and the provided "route"-template. 然后,依据方法
getEditLink(id)
根据item
的给定id和提供的“route”-template组装实际链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.