Overlay with Portal with multiple trigger buttons on the same page

[danielschweiger]

I have this component

<template>
    <div>
        <div class="my-2">
...
            <button class="rounded-full py-1 px-2 text-xs bg-90 text-white" @click="openModal">{{__('Open Modal')}}</button>
            <portal to="modals">
                <transition name="fade">
                    <general-modal
                        v-if="modalOpen"
                        @confirm="confirmModal"
                        @close="closeModal"
                    />
                </transition>
            </portal>
        </div>
    </div>
</template>

This component renders in a table row, so multiple times.

When I have just one tablerow, it works. When I have multiple table rows it works only on the last row.

How can I solve this?

[LinusBorg]

Not sure if this is still an issue for you as this issue is 2 months old.

What does it mean to say "it only works on the last row"?

[andre-brdoch]

@LinusBorg I think what he is trying to do is to teleport multiple elements to the same target, as it is possible with Vue3's teleport feature: https://v3.vuejs.org/guide/teleport.html#using-multiple-teleports-on-the-same-target

I have also not managed to do that yet, only the last portal ends up being rendered in portal-target

[andre-brdoch]

actually found out that this is possible by setting multiple key:

<PortalTarget name='nav-dropdown' multiple></PortalTarget>