Ho To give dynamic href in html when using vuejs

[Anshul-Batra]

Hi have a v-repeat on big object

<div v-repeat="obj : mainObj">
<a href="#{{obj.name}}"></a>
</div>

I want to give href value dynamically based on the iteration of object in vuejs. The obj has a property name but name is ofcource more than one word. When i give href as name it also takes space. like if name is "john clark" the href value will be "#john clark". This stops my functionality to work.

How can i trim spaces from name while giving it in href?

Please suggest

[yyx990803]

You can make a filter:

<a href="#{{obj.name | trimSpaces}}"></a>

[raisrahman]

Hi @yyx990803 evan, I try to make filter inside href attribute in vue 2.0 but it doesnt work. I'm using <a href="#{{product.id | formatParam(product.category,product.count)}}"></a> but it doesnt work. So I change my code into this

<a :href="product.id | formatParam(product.category,product.count)"></a>

And still doesnt work, why?. The error message is

formatParam is not defined on the instance but referenced during render

Any solutions? Thanks

[humanismusic]

Filters have been replaced with computed properties in Vue 2.0. Take a look here: http://vuejs.org/guide/list.html

[zibuyu1995]

@raisrahman You can refer to：

        <el-table-column label="Path" min-width="195">
          <template scope="props">
            <a v-bind:href="''+props.row.path+''">{{ props.row.path }}</a>
          </template>
        </el-table-column>

it ′ s work

[lluma]

@zibuyu1995 Thx! That's what I looking for~

[sschadwick]

Any way to do this without string concatenation? Preferably something along the lines of template literal