1

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.
halfer
  • 19,824
  • 17
  • 99
  • 186
Dhaval
  • 1,393
  • 5
  • 29
  • 55
  • the first part of your question indicates you might need to use filters. – samayo Jan 12 '17 at 09:57
  • @samayo can you explain me with example so I or any developer can understand ? – Dhaval Jan 12 '17 at 09: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 Jan 12 '17 at 10:34

1 Answers1

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

CodinCat
  • 15,530
  • 5
  • 49
  • 60