Styjun

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.

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.

Use Like this

 <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 (e.g. "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.