VueJS - 如何在 v-for 中绑定 :href

Question

所以我有一个表，我想<tr>在某个名为 的数组中渲染每个项目offers。

看起来有点像这样：

<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>

我的问题是我不太确定如何href正确绑定属性。这在没有绑定代码的情况下工作得很好:href......因为它可以很好地显示电子邮件。但是，我希望提供更好的用户体验，而不是仅仅吐出数据，而无法单击电子邮件/电话并使用户能够跳转到他们选择的首选电子邮件/呼叫应用程序。

求救！

Answer 1

你应该在 v-bind 表达式中编写 js 代码

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