v-model:visible on multiple dropdown

[fahmiegerton]

Hi, I got some issue with dropdown. I have this multiple dropdown with popover.

<a-dropdown :trigger="['click']" placement="bottomRight" v-model:visible="opsidropdown">
	<a class="ant-dropdown-link" @click.prevent>
		More
		<DownOutlined />
	</a>
	<template #overlay>
		<a-menu>
			<a-menu-item key="1" @click="$emit('edit', record)"> Edit </a-menu-item>
			<a-menu-divider />
			<a-popconfirm
				:title="titledelete"
				:visible="visibledelete"
				ok-text="Yes"
				cancel-text="No"
				@visibleChange="(bool) => handleVisibleDeleteChange(record.id, bool)"
				@confirm="confirmDelete(record.id)"
				@cancel="cancelDelete"
			>
				<a-menu-item key="3">Delete</a-menu-item>
			</a-popconfirm>
		</a-menu>
	</template>
</a-dropdown>

Since I have this multiple dropdown depends on how many data in table, when I set opsidropdown to true, all the dropdown is opening. while I just want to open the first or second dropdown, not all dropdown. I don't know how to make reactive value dynamically. How to workaround this? Thanks!