CODEWITHSUNDEEP
phplaravelvue.js
twigg
twigg

Reputation: 3993

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:

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

Upvotes: 4

Views: 3808

Answers (4)

Abdullah Al Mamun
Abdullah Al Mamun

Reputation: 132

You can try this using backtick.

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

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

Upvotes: 3

mynd
mynd

Reputation: 794

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.

Upvotes: 1

Future Coder
Future Coder

Reputation: 134

Use Like this 

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

Upvotes: 0

Bruno Francisco
Bruno Francisco

Reputation: 4220

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.

Upvotes: 0

Related Questions