How to pass a VueJS variable into a Laravel blade route

Question

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:

<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:

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. In pure PHP/Blade I have this and it works:

<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.

Answer 1

You can try this using backtick.

Its works for me. I hope it's helpful for you.

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

Answer 2

You can try by appending the id to the end like so:

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

I'm guessing you are following a REST URI guides so that would work for you.

Answer 3

使用像这样

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

Answer 4

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").

Because of that, referencing a property of item within a blade expression will fail (as it does).

<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.

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 .

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:

<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.