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

Question

Before asking question I googled for this problem and I find this solution but it's not working for me.

Let's start with example that I am developing in my project. My project is in Laravel so below example is in Blade file.

Using Vue.js I get response and set in template structure.

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

Let's assume that I am getting brand.name = test demo. And using this brand.name I want to build href url like this: href = "{{url('brand/test-demo'}}".

One more thing I want to complete is I want to pass this href link to other Vue http request like

created: function(){

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

}

How can I achieve these things?

Update

I have tried below methods but none of working.

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

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

But when I pass full URL it works like :

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

the first part of your question indicates you might need to use filters. — samayo
– samayo, Commented Jan 12, 2017 at 9:57
@samayo can you explain me with example so I or any developer can understand ? — Dhaval
– Dhaval, Commented Jan 12, 2017 at 9:58
Couldn't you build the correct url on your server and return that to Vue rather than having to manipulate the url in your javascript? — craig_h
– craig_h, Commented Jan 12, 2017 at 10:34

CodinCat · Accepted Answer · 2017-01-12 10:14:01Z

2

Don't think too much, just write a helper function for that.

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

and inject this function to Vue

Vue.prototype.url = url

then you can use this function in your template everywhere

answered Jan 12, 2017 at 10:14

CodinCat

16k6 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

Update

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related