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

Question

在提问之前，我用谷歌搜索了这个问题，我发现但它对我不起作用。

让我们从我在项目中开发的示例开始。我的项目在 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。使用这个 brand.name 我想像这样构建 href url：href = "{{url('brand/test-demo'}}".

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

created: function(){

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

}

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

更新

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

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

Answer 1

别想太多，写个辅助函数就可以了

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

并将此函数注入 Vue

Vue.prototype.url = url

然后你就可以在你的模板中的任何地方使用这个函数了

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

Vue js - How to create href link from Vue data response and pass to next request?

vue.js

laravel-5

vuejs2

更新