Concatenate string with Vue in href

Question

I need to play this URL inside href:

http://localhost:62828/colecoes/channel.aspx?channelId=30271973&category=4

But instead of channelId=30271973 I need to concatenate with {{collection. Id}}

Down with my href:

<h3 class="item-title"><a href="">{{colecao.tituloCanal}}</a></h3>

Answer 1

You can use a reactive value (computed) for this, if you concatenate in the template he can not see cache and will calculate each render.

Would that be:

Template:

<h3 class="item-title"><a :href="url">{{colecao.tituloCanal}}</a></h3>

Component:

computed: {
    url(){
        return `http://localhost:62828/colecoes/channel.aspx?channelId=${this.colecao.Id}&category=4`;
    }
}

Answer 2

You can do it like this:

<h3 class="item-title"><a :href="'http://localhost:62828/colecoes/channel.aspx?channelId=' + colecao.Id + '&category=4'">{{colecao.tituloCanal}}</a></h3>

Or

<h3 class="item-title"><a v-bind:href="'http://localhost:62828/colecoes/channel.aspx?channelId=' + colecao.Id + '&category=4'">{{colecao.tituloCanal}}</a></h3>