How to add "mailto:" when binding and email address to :href

[bodigital]

Hi, I'm looping through a collection of email addresses, and would like the template to be a mailto-link. Do I have to create a separate function for this or is there an easy way around that I miss?

<div x-data="{emails: [{'type': 'personal', 'email': '[email protected]'}, {'type': 'work', 'email': '[email protected]'}]}">
  <template x-for="mail in emails">
    <a x-text="mail.email" :href="mail.email"
       class="inline-flex mb-2 items-center justify-center flex-shrink-0 w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 sm:flex-1"></a>
  </template>
</div>

[danddanddand]

You just have to build the string in js. So for example changing your :href expression to "'mailto:' + mail.email" or making helper function that returns template literal.

[bodigital]

Thank you! I was unaware that I could simply manipulate the string the way you described in this scenario.