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

【问题标题】：VueJS - How to bind :href within v-forVueJS - 如何在 v-for 中绑定 :href
【发布时间】：2022-01-16 19:56:08
【问题描述】：

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

看起来像这样：

<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 绑定的代码，这可以正常工作...因为它可以很好地显示电子邮件。但是，我希望提供更好的用户体验，而不是仅仅吐出数据而无法单击电子邮件/电话并使用户能够跳转到他们选择的首选电子邮件/呼叫应用程序。

求救！

【问题讨论】：

标签： html vue.js

【解决方案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>

【讨论】：

你是认真的人！像魅力一样工作！

【解决方案2】：

你只需要一个计算的 prop 来将 email 与前缀组合起来：

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

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

当然，您可以内联，但最好将其提取到计算的 prop 中，以防此表达式可能变得更复杂。

【讨论】：

非常感谢您的回复。
感谢您在这一点上帮助教育我。这种语法对我来说绝对是陌生的。