Reputation: 11
I can't seem to bind the Alpine click event when I dynamically render content in Astro.js.
This is an example of that :
<div class="grid grid-cols-1 min-[450px]:grid-cols-2 md:grid-cols-4 xl:grid-cols-8 pt-8 gap-x-8 gap-y-12 " x-data=`{ open: false, id: null, team: ${JSON.stringify(team)} }`>
{team.map((person, id) =>
<div class="flex flex-col items-center group" @click=`open = true; id = '${id}';`>
<Image src={person.image} alt="team member image" class="pb-4" />
<h6 class="text-white font-semibold text-xl lg:text-xl text-center">{person.name}</h6>
<p class="text-base lg:text-lg text-white/60 text-center">{person.title}</p>
<button class="flex items-center gap-3 text-white font-medium text-base lg:text-lg pt-4 group-hover:text-white/60 transition-all ease-in"><span>READ MORE</span> <i class="fa-sharp fa-regular fa-arrow-right"></i></button>
</div>
)}
</div>
and this part: @click=open = true; id = '${id}';
is not a valid syntax here.
What my solution was is to create a new component, instead of rendering it as JSX, and inside it would work fine. but I don't want to create a new component if I only use it in one place, just for the click event.
Upvotes: 1
Views: 61
Reputation: 39393
You're not supposed to use backticks, but double quotation marks for HTML attributes:
<div @click="open = true; id = '${id}';"></div>
Upvotes: 0