Problem: Every time I open the modal in one of the child components in the loop it always opens the modal in the last element of the loop. I cannot make it open the modal of the other child elements even though I try to trigger their modal.
My code looks like this:
Parent component (+page.svelte):
<script lang="ts"> import type { PageData } from './$types'; import { Heading } from 'flowbite-svelte'; import Card from './Card.svelte'; export let data: PageData;</script><svelte:head><title>Content</title><meta name="overview" content="Overview of contents" /></svelte:head><Heading tag="h3" class="mb-12">Your content</Heading><div class="grid grid-cols-3 gap-8 2xl:grid-cols-4 3xl:grid-cols-5"> {#each data.contents as content}<Card {content} /> {/each}</div>Child component (Card.svelte):
<script lang="ts"> import type { ContentListDTO } from '@content-service/content_dto'; import { formatRelative } from 'date-fns'; import { Card, Dropdown, DropdownItem, GradientButton, Input, Label, Modal } from 'flowbite-svelte'; import { ArrowRightOutline, DotsVerticalOutline, FileInvoiceOutline } from 'flowbite-svelte-icons'; export let content: ContentListDTO; let openRenameModal = false; function capitalizeFirstLetter(value: string) { return value.charAt(0).toUpperCase() + value.slice(1); } const createdAt = capitalizeFirstLetter(formatRelative(new Date(content.createdAt), new Date()));</script><Card class="relative"><div class="img-bg bg-gray-200 rounded-t-lg"><FileInvoiceOutline strokeWidth="1" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-16 h-16" /></div><h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"> {content.title}</h5><p class="mb-8 font-extralight text-gray-500 dark:text-gray-400 leading-tight"> Created: {createdAt}</p><div><GradientButton pill color="blue" class="w-fit"> Edit <ArrowRightOutline class="w-6 h-6 ms-2 text-white" /></GradientButton><DotsVerticalOutline class="dots-menu float-right mt-2 -mr-3 w-8 h-8 dark:text-white cursor-pointer hover:bg-gray-200 rounded" /><Dropdown triggeredBy=".dots-menu"><DropdownItem on:click={() => (openRenameModal = true)}><span class="font-light">Rename</span></DropdownItem><DropdownItem><span class="text-red-600 font-light">Delete</span></DropdownItem></Dropdown></div></Card><Modal size="xs" bind:open={openRenameModal} autoclose outsideclose><form class="flex flex-col space-y-6" action="#"><h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Rename content</h3><Label class="space-y-2"><span>Current content title</span><Input type="text" name="currentTitle" disabled readonly class="focus:border-blue-500 focus:ring-blue-500" value={content.title} /></Label><Label class="space-y-2"><span>New content title</span><Input type="text" name="title" required class="focus:border-blue-500 focus:ring-blue-500" /></Label><GradientButton type="submit" color="blue" class="w-full1">Rename content</GradientButton></form></Modal>So far, I've tried to move the modal to the parent component without any success as well as trying various bind directives.