CODEWITHSUNDEEP
htmlvue.js
ajavad
ajavad

Reputation: 155

VueJS - How to bind :href within v-for

So I've got a table and I want to render a <tr> per item within some array called offers.

Looks sorta like this:

<table>
        <thead>...</thead>
        <tbody>
            <tr v-for="offer in offers" style="background-color:snow;text-align:center;font-size:1.5em;" class="align-content-center;">
                <td style="color:forestgreen;"><strong>{{offer.OfferAmount | currency }}</strong></td>
                <td>{{offer.BuyerName}}</td>
*SOS* -->       <td><a v-bind:href="mailto:{offer.BuyerEmail}">{{offer.BuyerEmail}}</a></td>
*SOS* -->       <td><a v-bind:href="tel:{offer.BuyerPhone}">{{offer.BuyerPhone}}</a><</td>
                <td>{{offer.CreatedDate | formatDate }}</td>
                <td><strong><a v-on:click="chooseThisOffer(offer.Id, adId)" href="#">Accept Offer</a></strong></td>
            </tr>
        </tbody>
</table>

My issue here is that I'm not quite sure how to get the href attribute to bind properly. This works just fine without the code for the :href binding... as it displays the email just fine. But, I'd like to make a better user experience than just spitting out the data without the ability to click the email/phone and enable the user to jump to their preferred email/calling application of choice.

SOS!

Upvotes: 0

Views: 2289

Answers (2)

Anatoly
Anatoly

Reputation: 22758

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.

Upvotes: 2

Saeid Doroudi
Saeid Doroudi

Reputation: 1225

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>

Upvotes: 6

Related Questions