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

Issue

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.

Solution

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