Vue js - 如何从 Vue 数据响应创建 href 链接并传递给下一个请求？答案

【问题标题】：Vue js - How to create href link from Vue data response and pass to next request?Vue js - 如何从 Vue 数据响应创建 href 链接并传递给下一个请求？
【发布时间】：2017-05-27 08:56:22
【问题描述】：

在问问题之前，我用谷歌搜索了这个问题，我找到了this solution，但它对我不起作用。

让我们从我在项目中开发的示例开始。我的项目在 Laravel 中，所以下面的示例在 Blade 文件中。

使用 Vue.js 我得到响应并在模板结构中设置。

<ul>
<li v-for="brand in list">
    @{{brand.name}}
    <a href="#"> // how to create href url from brand name that come from Vue response and I want to replace space(' ' ) with dash( '-') and pass to href url

                       <img :src="brand.image">

    </a>

</li>

</ul>

假设我收到了brand.name = test demo。并使用这个品牌名称，我想像这样构建 href url：href = "{{url('brand/test-demo'}}"。

我想完成的另一件事是我想将此 href 链接传递给其他 Vue http 请求，例如

created: function(){

axios.get('brand/test-demo').then(response => this.detail = response.data) ;

}

我怎样才能实现这些目标？

更新

我尝试了以下方法，但没有奏效。

<a :href="{{url('brand/' + brand.name}} ">

<a :href="{{url('brand/'}}" + brand.name ">

但是当我传递完整的 URL 时，它的工作方式如下：

<a :href="'http://localhost/gift_india/' + brand.name "> // // this one work but I want dynamic URL.

【问题讨论】：

问题的第一部分表明您可能需要使用过滤器。
@samayo 你能用例子解释一下，以便我或任何开发人员都能理解吗？
难道您不能在您的服务器上构建正确的url 并将其返回给Vue，而不必在您的javascript 中操作url？

标签： laravel-5 vue.js vuejs2

【解决方案1】：

别想太多，写个辅助函数就行了。

function url (str) {
  return str.replace(/\s+/g, '-')
}

并将这个函数注入到 Vue

Vue.prototype.url = url

那么你就可以在你的模板中到处使用这个函数了

【讨论】：