Question

我在vuejs中有一个变量：

invoice.id

我想将此id添加到刀片中的laravel路径中，如下所示：

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

但它不起作用，有没有办法将该变量传递给路线？

我收到的发票就是这样的数组：

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

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

为其数组开具发票。

Answer 1

将vuejs中的href绑定为:href或v-bind:href

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

检查以下示例

＆＃13;

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

＆＃13;

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

＆＃13;

以下是props所指示的子组件值的示例

＆＃13;

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
  }
});

＆＃13;

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

＆＃13;

Answer 2

您可以尝试：

@{{ invoice.id }}

希望帮助你解决问题。

Answer 3

如果您使用 mixin 并将其放入您的 app.js

import invoiceMixin from '@/invoice-mixin';
new Vue({
  el: '#app',
  router,
  mixins: [invoiceMixin]
})

发票-mixin.js

export default {
  computed: {
    invoiceLink(){
      return `/invoice/${invoice.id}/history`;
    }
  }
}

您可以像这样直接在刀片中的任何位置访问它：

<div>
  <a :href="invoiceLink"> Link </a>
</div>

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

3 个答案: