How to get Index of selected v-item inside a v-data-iterator with pagination enabled

[basebandit]

Hello good people anyone used vuetify's v-item-group and v-data-iterator here I have a problem..I have rows of v-cards wrapped inside v-cols which are all then wrapped inside a v-item-group with each v-col inside a v-item and then all of that wrapped inside the parent v-data-iterator now ! got two problems

1. The index of selected card does not reflect the index of the same item in the array that was passed to the items props as the source of truth.This changes with each page.
2. When you click a card in one page another card in the same position in all the consecutive pages also get selected.

I would love to get the actual index as is in the data source passed to the items props and I would like to stop the consecutive selection of cards.

Below is a link to reproduce my issue. Any help is highly appreciated.
https://codesandbox.io/s/twitter-dashboard-v2ndg?file=/src/App.vue

[nekosaur]

Please give some reproduction steps to illustrate what should or should not happen in the sandbox.

At first glance I'm not entirely sure why you have a v-item-group inside the iterator.

[basebandit]

I have it because I wanted a quick way to have pagination. If you can click on one card then go to the next page you will see a card in the same position also clicked. I expect that only the card that I click on gets selected and I also would like to get the index of the selected card as is in the :items="avatars" Example: If the index of lets say Mark Barkley is 0 in avatars I want the index of the selected card to reflect that. For now that only applies on page 1 but once you flip to the next page the index restarts from 0 again.

[nekosaur]

Would something like this not work? https://codesandbox.io/s/twitter-dashboard-forked-tehp4?file=/src/App.vue

[basebandit]

This works perfectly. I could not have known this. Thank you.

[basebandit]

I have an issue though not related to this. If i want to disable the cards marked as assigned when I click one or more cards that have been marked as unassigned. I am using a boolean flag assigning in data object and am toggling it to true when I click the unassigned card but once I click another unassigned card it toggles assigning back to false and the assigned card becomes clickable again.

[nekosaur]

Please either create a new discussion, or join us on discord

[basebandit]

Thank you.