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

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。使用这个品牌名称，我想构建这样的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.

Answer 1

不要想太多，只需为此编写一个辅助函数即可。

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

并将此功能注入Vue

Vue.prototype.url = url

然后你可以在你的模板中到处使用这个功能