如何将js变量传递给laravel中的url标记

Question

I do have a variable in vuejs :

invoice.id 

I want to add this id to a laravel route in blade like so :

<a href="/invoice/{{invoice.id}}/history" />

but it does not work, is there any way how to pass that variable to the route ?

I am getting invoices as an array like so :

<script>
    import {statusColor} from "../util";

    export default {
        props: ['invoice', 'index'],
</script>

invoice its an array.

Answer 1

Bind href in vuejs as :href or v-bind:href

<a :href="'/invoice/'+invoice.id+'/history'" />

Check below example

var V = new Vue({
  el:"#app",
  data:{
    invoice:{id:111}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<div id="app">
<a :title="'/invoice/'+invoice.id+'/history'" :href="'/invoice/'+invoice.id+'/history'">Hover me to check href value</a>
</div>

Here is the example with child component value assinged by props

var Child = {
  template:`<div>Child component : <a :title="'/invoice/'+invoice.id+'/history'" :href="'/invoice/'+invoice.id+'/history'">Hover me to check href value</a></div>`,
  props:['invoice'],
}
var V = new Vue({
  el:"#app",
  data:{
    invoice:{id:111}
  },
  components:{
    Child
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<div id="app">

<child :invoice="invoice"></child>
</div>

</div>