Link to a route with a parameter of Vue.js

Question

I'm using Vue.js and Laravel to render a simple table listing products. From there I want to link to a product detail page like this:

<a href="{{ route("product::details", ['product' => '???']) }}">@{{ product.id }}</a>

Since the table is generated on client side base on a data object, I'm looking for the most elegant way to implement that while not bypassing any laravel methods like route() that allows me to link to a named route.

Do I really have to manually merge the result of the route-method with the Vue variable in Javascript?

In my mind is something like:

<a href="{{ route("product::details", ['product' => ':product.id']) }}">@{{ product.id }}</a>

which I could probably parse/inject by Vue via data binding?

Similar to the following question, but I need to merge "backend parameters" into the link target: stackoverflow.com/questions/32560184/… — patriziotomato
– patriziotomato, Commented Mar 24, 2016 at 12:28
Are you using laravel or vue-router for your routing? I can't think of a way this would work off the top of my head, as both of them either require a path, or a named route + parameters — Jeff
– Jeff, Commented Mar 24, 2016 at 15:47
hmm, have you tried <a href="{{ route("product::details", ['product' => '@{{ product.id }}']) }}">@{{ product.id }}</a> ? — Raj Kamal
– Raj Kamal, Commented Mar 31, 2016 at 5:04

Bruno · Accepted Answer · 2020-09-29 13:18:57Z

6

As Vue it's client side and laravel it's server side you can't accomplish that in that way.

But you can do something like this over the rendered route:

Create a vue method

goto_route: function (param1) {
     route = '{{ route("yournamedroute", ["yourparameter" => "?anytagtoreplace?"]) }}'
     location.href = route.replace('?anytagtoreplace?', param1)
}

Now in your action element

<div v-for="o in object">
     <a v-on:click="goto_route(o.id_key)">press</a>
</div>

Basically you're replacing the... uhmm... let's name it "placehoder" in the rendered route with the required value.

hope it helps.

edited Sep 29, 2020 at 13:18

Bruno

771 silver badge10 bronze badges

answered Aug 22, 2016 at 19:16

Antonio BG

761 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Link to a route with a parameter of Vue.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related