Link zu einer Route mit einem Parameter von Vue.js

Question

Ich verwende Vue.js und Laravel, um eine einfache Tabelle mit Produkten darzustellen. Von dort aus möchte ich eine Produktdetailseite wie folgt verlinken:

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

Da die Tabelle auf Client-Seite basieren auf einem Datenobjekt erzeugt wird, ich bin auf der Suche für die eleganteste Art und Weise, dass während umzusetzen Keine Laravel-Methoden wie route() umgehen, die es mir erlaubt, eine benannte Route zu verknüpfen.

Muss ich das Ergebnis der route-Methode manuell mit der Vue-Variable in Javascript zusammenführen?

In meinem Kopf ist so etwas wie:

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

, die ich wahrscheinlich von Vue könnte analysieren/injizieren über Datenbindung?

Answer 1

Als Vue ist es Client-Seite und Laravel es ist Server-Seite, die Sie auf diese Weise nicht erreichen können.

Aber man kann über die gerenderte Route so etwas tun:

erstellen vue Methode

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

}

Jetzt in Ihrem Aktionselement

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

Grundsätzlich Sie Ersetzen Sie das ... uhmm ... nennen wir es "placehoder" in der gerenderten Route mit th Der erforderliche Wert.

hoffe es hilft.