[Vuejs]-VueJS – How to bind :href within v-for

by

4👍

✅

you should write js code inside v-bind expression

 <td>
    <a v-bind:href="`mailto:${offer.BuyerEmail}`">{{offer.BuyerEmail}}</a>
 </td>
 <td>
   <a v-bind:href="`tel:${offer.BuyerPhone}`">{{offer.BuyerPhone}}</a>
 </td>
👤Saeid Doroudi

2👍

You just need a computed prop to combine email with a prefix:

<a v-bind:href="buyerEmail">{{offer.BuyerEmail}}</a>

computed: {
   buyerEmail () {
     return `mailto:${this.offer.BuyerEmail}`
   }
}

Of course, you can do it inline but it’s better to extract it to a computed prop in case this expression might become more complex.

👤Anatoly

Leave a comment