how to embed variable in x-for in a link?

[sqllyw]

Hi,

I got a code like:

https://codepen.io/sqllyw/pen/rNWvBRZ

I'd like to have link to sample.com / item.name, how to achieve this? thanks

[KevinBatdorf]

Try this:

:href="`http:/samples.com/${item.name}`"

[pascalandy]

To conclude

data

<div
  class="not-sr-only"
  x-data="{ 
      navTitle: {
        1: { name: 'Alex', url: 'https://samples.org/en/1/' },
        2: { name: 'Thomas', url: 'https://samples.org/en/2/' }
      },
      urlSite: 'https://samples.org/',
      tab: 'news'
    }"
>
...
</div>

not working

  <div class="p-4 font-base">
    <template x-for="item in Object.values(navTitle)" :key="item">
      <tr>
        <td><a href="http:/samples.org/item.name" x-text="item.name"></a></td>
      </tr>
    </template>
  </div>

working

  <div class="p-4 font-base">
    <template x-for="item in Object.values(navTitle)" :key="item">
      <tr>
        <td><a :href="`http:/samples.org/${item.name}`" x-text="item.name"></a></td>
      </tr>
    </template>
  </div>