How to pass a link from forloop to snippet

Hey everyone,

I’m working on a projects page, when I click on a project I would like to open it on top of the projects page inside of a div.
But is not working: when I click on a project it just open the last one of the list.

How can I pass the right id/link to the snippet?

  1. I have a for loop where I load and display all the projects

  2. After the loop I have a snippet for showing the content of the project on top of the page

  3. I pass a variable to the snippet with the intention of pointing the project I clicked on (not working)

projects page

  class="flex-grow mt-24 font-neue-reg w-full" x-data="{ project: false }">
  <section class="px-4 flex flex-row">
    @foreach ($page->children()->listed() as $item)
    <div class="w-64 pr-8">
      <a @click="project = ! project">
          <img src="{{ $item->images()->filterBy('template', 'cover') }}" alt="">
            <p>{{ $item->title() }}</p>
            <p>{{ $item->location() }}, {{ $item->year() }}</p>

  @snippet('project-container', $item)



    @click.outside="project = false"
    class="w-full border-t border-gray-300 bg-gray-100 overflow-scroll h-[calc(100%_-_6rem)] px-4 fixed z-20 bottom-0 flex flex-col items-center">
    <h3 class="pt-4 text-2xl">{{ $item->title() }}</h3>
    <section class="flex flex-col items-center space-y-4 max-w-xl mt-12">
      @foreach ($item->images()->filterBy('template', 'gallery') as $img)
        <img src="{{ $img->url() }}" alt="">

I use alpine.js to show and hide the project & blade

Many thanks for any help!

Your are calling your snippet outside your foreach loop. At this point, $item has the value of the last item in the loop. So your snippet has to go inside the loop.

If I had to do this, I‘d use an Ajax call snd a content representation

1 Like

Thanks @texnixe I will try like you said