如何将vue js变量传递给laravel中的url标签答案

【问题标题】：How to pass a vuejs varaible to a url tag in laravel如何将vue js变量传递给laravel中的url标签
【发布时间】：2018-05-08 14:33:49
【问题描述】：

我在 vuejs 中有一个变量：

invoice.id

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

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

但它不起作用，有什么办法可以将该变量传递给路由？

我正在以数组形式获取发票：

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

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

invoice 它是一个数组。

【问题讨论】：

标签： php laravel vue.js

【解决方案1】：

你可以试试：

@{{ invoice.id }}

希望对您的问题有所帮助。

【讨论】：

@trace_le 告诉我们您在使用此方法时看到的内容。正如您在documentation 中看到的那样，这应该是一个解决方案。 invoice 是 Vue 组件的属性吗？
我认为这在 vuejs 和 laravel 中都不起作用

【解决方案2】：

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

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

查看以下示例

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>

这里是由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>

【讨论】：

@trace_le: 你在子组件中得到this.invoice 吗？
@trace_le : 你也可以为你的子组件做一个现场演示吗？
你说的invoices as an array和尝试像invoice.id一样的对象也有一些混淆？

【解决方案3】：

如果你使用 mixin 并把它放在你的 app.js 中

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

invoice-mixin.js

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

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

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

【讨论】：