ImageGroup gets active image index or how can this be done?

[vasotelvi]

Hi!

I was talking with GPT to find solution about my case, but it fail.

when using Naive UI Image component in n-image-group > n-image v-for="(link, index) of photos" lazy
How can I use :render-toolbar="renderToolbar" or some other way to determine which image is active and how can I get a link to the image from renderToolbar?

GPT

To determine which image is active in the Naive UI n-image-group component and get a reference to that image in the render-toolbar, you can use several approaches. Here is one option:

1. Use active and onUpdate:active: You need to track the active image by adding active and onUpdate:active props to the n-image-group component. This will let you know which index is active.
2. Define renderToolbar: In this method, you can use the active index to get a reference to the current image.

I did not find any way to get the index of the active image in order to add the ability to delete an image and send the necessary data to the server in the toolbar - what exactly needs to be deleted.
Does anyone have any options for solving this problem?

An example of a logical but non-working implementation:

<n-image-group 
  :active ="activeIndex"
  :render-toolbar="renderToolbar" 
  show-toolbar-tooltip
  @update:active="setActiveIndex">
            <n-space>
                <n-image 
                     v-for="(link, index) of photos" 
                     lazy 
                     width="100" 
                     :src="link" 
                     :key="mCode + '-ph-' + index"
                  />
            </n-space>
</n-image-group>

JS

<script setup>
//...
const activeIndex = ref(0);
const setActiveIndex = (index) => {
    activeIndex.value = index; 
    console.log('activeIndex.value: ', activeIndex.value)
};
//...
const renderToolbar = ({ nodes }) => {
    const currentImage = photos.value[activeIndex.value] // ← ???
    return [
        nodes.prev,
        nodes.next,
        nodes.rotateCounterclockwise,
        nodes.rotateClockwise,
        nodes.resizeToOriginalSize,
        nodes.zoomOut,
        nodes.close,
        h(
            NButton,
            {
                circle: true,
                type: "error",
                style: { marginLeft: "22px" },
                tooltip: "Удалить навсегда!",
                onClick: () => {
                    handleConfirm(currentImage); // ← ???
                }
            },
            {
                icon: () => h(TrashBinSharp)
            }
        )
    ]
}
//...