Vuejs + Vuetify. Генерирую таблицы на странице по нажатию кнопки. v-slot для редактирования. Как получить индекс строки с индексом таблицы?

Question

[domanskiy]

Через v-for генерируеются таблицы на странице.
Для редактирования данных использую v-slot. Сам пример взят из доков vuetify - https://vuetifyjs.com/en/components/data-tables/#c...

В темплейте есть кнопок редактирования:

<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>

В функцию передаётся объект item
Но там всё что касается строки.

Data у меня модифицирована:

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 - это таблица
Суть в том, что на сервер отправляется json где djob имеет frames со списком объектов frame. Frame содержит список строк.

Что бы отредактировать данные в data, нужно получить не только строку, но и frame с его frame_num
Как это сделать?

Comments

[domanskiy]

Чисто для примера, код json для POST запроса на создание записи в БД на сервере

{
    "diecut_cut_name": "A1001",
    "bleed": "1.5",
    "razmeshenie": "h",
    "digitaljob_num": "05 0005",
    "customer_id": 8,
    "color_print": "cmyk",
    "descript": "описание",
    "frames": [
        {
            "frame_num": 1,
            "descript": "описание фрейма1",
            "rows": [
                {
                    "descript": "описание 1 строки 1 фр",
                    "design_url": "\\\\TS\\Obmen\\190001__ED.pdf",
                    "row_number": 1,
                    "design_angle_rotate": 0
                },
                {
                    "descript": "описание 2 строки 1 фр",
                    "design_url": "\\\\TS\\Obmen\\190002__ED.pdf",
                    "row_number": 2,
                    "design_angle_rotate": 0
                }
            ]
        },
        {
            "frame_num": 2,
            "descript": "описание фрейма2",
            "rows": [
                {
                    "descript": "описание 1 строки 2 фр",
                    "design_url": "\\\\TS\\Obmen\\200002__ED.pdf",
                    "row_number": 1,
                    "design_angle_rotate": 0
                },
                {
                    "descript": "описание 2 строки 2 фр",
                    "design_url": "\\\\TS\\Obmen\\200002__ED.pdf",
                    "row_number": 2,
                    "design_angle_rotate": 0
                },
                {
                    "descript": "описание 3 строки 2 фр",
                    "design_url": "\\\\TS\\Obmen\\200003__ED.pdf",
                    "row_number": 3,
                    "design_angle_rotate": 0
                },
                {
                    "descript": "описание 4 строки 2 фр",
                    "design_url": "\\\\TS\\Obmen\\200004__ED.pdf",
                    "row_number": 4,
                    "design_angle_rotate": 0
                },
                {
                    "descript": "описание 5 строки 2 фр",
                    "design_url": "\\\\TS\\Obmen\\200005__ED.pdf",
                    "row_number": 5,
                    "design_angle_rotate": 0
                }
            ]
        }
    ]
}

Answer 1

[Юрий]

Ну так и передайте индекс вместе с айтемом:

<template v-slot:item.actions="{item, index}">

Comments

[domanskiy]

Пробовал. Передаётся индекс строки.
Может вопрос не грамотно оформлен.
Сама строка и индекс передаются. Но нет в этих данных индекса таблицы.
Допустим сгенерировал я 2...10 таблиц. Данные в data имеются. Через плагин к браузеру любая строка правится. Всё ок.
Но щелкаю на редактирование, в функцию передаются данные строки. Индекс строки в данной таблице. Но как передать индекс таблицы?

[domanskiy]

Т.е. нужно передать индекс/параметры родительского компонента (таблицы)

[domanskiy]

у меня есть v-slot:top, индекс которого и есть индекс текущей таблицы.

как-то из слота в слот данные можно перекидывать, из top в item ?