Vuejs + Vuetify. I generate tables on the page on button click. v-slot for editing. How to get row index with table index?

Question

Vue.js

Through v-for tables on the page are generated.
For data editing I use v-slot. The example itself is taken from the vuetify docs - https://vuetifyjs.com/en/components/data-tables/#c...

There are edit buttons in the template:

<template v-slot:item.actions="{item}">
        <v-icon
                small
                class="mr-2"
                @click="editItem(item)"
        >
          mdi-pencil
        </v-icon>
        <v-icon
                small
                @click="deleteItem(item)"
        >
          mdi-delete
        </v-icon>
      </template>

The item object is passed to the function
. But everything that concerns the string is there.

Data I have modified:

djob: {
                    diecut_cut_name: '',
                    bleed: '',
                    razmeshenie: '',
                    digitaljob_num: '',
                    customer_id: '8',
                    color_print: 'cmyk',
                    descript: 'описание',
                    frames: [],
                },
                frame: {
                    frame_num: '',
                    descript: '',
                    rows: [],
                },
                row: {
                    row_number: NaN,
                    design_url: '',
                    design_angle_rotate: 0,
                    descript: '',
                },

frame is a table.
The bottom line is that json is sent to the server where djob has frames with a list of frame objects. Frame contains a list of strings.

To edit the data in data, you need to get not only the string, but also the frame with its frame_num
How to do this?

Answer 1

Well, pass the index along with the item:
<template v-slot:item.actions="{item, index}">