Dijana
Dijana

Reputation: 11

Binding Alpine.js Click Events to Dynamically Rendered JSX Components in Astro.js

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

Answers (1)

mb21
mb21

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

Related Questions