Как я могу установить действительный примитивный ключ для моего цикла v-for?

Question

Мне нужно показать в таблице данных v-диалог, который содержит в основном меню ресторана, структурированное как массив объектов массивов объектов. Вот как я уже структурировал свое меню:

menu_ristorante: [
      {
        primi: [
          { nome_portata: "Fettuccine al ragù", quantita_portata: 0 },
          { nome_portata: "Tagliatelle alla boscaiola", quantita_portata: 0 },
          { nome_portata: "Spaghetti allo scoglio", quantita_portata: 0 },
          { nome_portata: "Zuppa di ceci", quantita_portata: 0 },
          { nome_portata: "Fettuccine al ragù", quantita_portata: 0 }
        ]
      },
      {
        secondi: [{ nome_portata: "Vitello tonnato", quantita_portata: 0 }]
      },
      {
        contorni: [{ nome_portata: "Insalata mista", quantita_portata: 0 }]
      },
      {
        bibite: [
          { nome_portata: "Acqua", quantita_portata: 0 },
          { nome_portata: "Vino Rosso", quantita_portata: 0 },
          { nome_portata: "Vino Bianco", quantita_portata: 0 },
          { nome_portata: "Caffè", quantita_portata: 0 }
        ]
      }
    ],

Затем я вставил свой диалог в таблицу v-данных, которая должна запускаться щелчком элемента свойства item.nome, который является первым столбцом таблицы моя таблица

<v-data-table
                light
                :headers="headers_tabella_persone"
                :items="tabella_persone"
                :items-per-page="10"
                class="elevation-1"
              >
                <template v-slot:item.interno="{ item }">
                  <v-checkbox v-model="item.interno"></v-checkbox>
                </template>
                <template v-slot:item.nome="{ item }" @click="dialog_visualizza_menu=true">
                  <v-dialog v-model="dialog_visualizza_menu" scrollable max-width="300px">
                    {{item}}
                    <v-card>
                      <v-card-title>Seleziona primo</v-card-title>
                      <v-divider></v-divider>
                      <v-card-text style="height: 300px;">
                        <v-radio-group v-model="dialogm1" column>
                          <v-radio v-for="portata in menu_ristorante" :key="portata.primi"></v-radio>
                        </v-radio-group>
                      </v-card-text>
                      <v-divider></v-divider>
                      <v-card-title>Seleziona secondo</v-card-title>
                      <v-divider></v-divider>
                      <v-card-text style="height: 300px;">
                        <v-radio-group v-model="dialogm1" column>
                          <v-radio v-for="portata in menu_ristorante" :key="portata.secondi"></v-radio>
                        </v-radio-group>
                      </v-card-text>
                      <v-card-title>Seleziona bibite</v-card-title>
                      <v-divider></v-divider>
                      <v-card-text style="height: 300px;">
                        <v-radio-group v-model="dialogm1" column>
                          <v-radio v-for="portata in menu_ristorante" :key="portata.bibite"></v-radio>
                        </v-radio-group>
                      </v-card-text>
                      <v-card-actions>
                        <v-btn color="blue darken-1" text @click="dialog_visualizza_menu = false">Close</v-btn>
                        <v-btn color="blue darken-1" text @click="dialog_visualizza_menu = false">Save</v-btn>
                      </v-card-actions>
                    </v-card>
                  </v-dialog>
                </template>
              </v-data-table>

Но я получаю эту ошибку на ключе взамен

Avoid using non-primitive value as key, use string/number value instead.

Таким образом, весь мой столбец item.nome не будет виден. Как я могу установить действительный примитивный ключ, ссылающийся на структуру моего меню?

EDIT-1 Я решил проблему ключа, удалив начальный уровень массива из моего объекта, и это мой обновленный объект

menu_ristorante: {
  primi: [
    { id: 1, nome_portata: "Fettuccine al ragù", quantita_portata: 0 },
    {
      id: 2,
      nome_portata: "Tagliatelle alla boscaiola",
      quantita_portata: 0
    },
    { id: 3, nome_portata: "Spaghetti allo scoglio", quantita_portata: 0 },
    { id: 4, nome_portata: "Zuppa di ceci", quantita_portata: 0 },
    { id: 5, nome_portata: "Fettuccine al ragù", quantita_portata: 0 }
  ],
  secondi: [
    { id: 1, nome_portata: "Vitello tonnato", quantita_portata: 0 }
  ],
  contorni: [
    { id: 1, nome_portata: "Insalata mista", quantita_portata: 0 }
  ],
  bibite: [
    { id: 1, nome_portata: "Acqua", quantita_portata: 0 },
    { id: 2, nome_portata: "Vino Rosso", quantita_portata: 0 },
    { id: 3, nome_portata: "Vino Bianco", quantita_portata: 0 },
    { id: 4, nome_portata: "Caffè", quantita_portata: 0 }
  ]
},

Шаблон тот же

<template v-slot:item.nome="{ item }">
              <div style="cursor:pointer;" @click="popolaMenu()">{{item.nome}}</div>
            </template>
          </v-data-table>
        </v-tab-item>
        <v-dialog v-model="dialog_visualizza_menu" scrollable max-width="800px">
          <v-card>
            <v-card-title>Seleziona primo</v-card-title>
            <v-divider></v-divider>
            <v-card-text style="height: 800px;">                 
                <v-radio-group v-model="dialogm1" column>
                <v-radio v-for="(portata) in menu_ristorante" :key="portata.primi">{{portata.primi}}</v-radio>
              </v-radio-group>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-title>Seleziona secondo</v-card-title>
            <v-divider></v-divider>
            <v-card-text style="height: 800px;">
              <v-radio-group v-model="dialogm1" column>
                <v-radio v-for="(portata) in menu_ristorante" :key="portata.secondi">{{portata.secondi}}</v-radio>
              </v-radio-group>
            </v-card-text>
            <v-card-title>Seleziona bibite</v-card-title>
            <v-divider></v-divider>
            <v-card-text style="height: 800px;">
              <v-radio-group v-model="dialogm1" column>
                <v-radio v-for="portata in menu_ristorante" :key="portata.bibite">{{portata.bibite}}</v-radio>
              </v-radio-group>
            </v-card-text>
            <v-card-actions>
              <v-btn color="blue darken-1" text @click="dialog_visualizza_menu = false">Close</v-btn>
              <v-btn color="blue darken-1" text @click="dialog_visualizza_menu = false">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

Я поместил его только вне таблицы v-data-table, чтобы избежать рекурсивного вызова, который вызовет cra sh моего приложения, так что теперь если я нажимаю на имя, появляется всплывающее окно, но оно заполнено неправильно

введите описание изображения здесь

Answer 1

Вы должны добавить ключ для l oop элементов в number или string. Но вы добавляете object.

Я бы посоветовал вам иметь идентификатор в объекте внутри menu_ristorante.

Кроме того, вы можете использовать индекс в качестве ключа, как показано ниже.

 v-for="portata, index in menu_ristorante" :key="index"

Вышеупомянутое не рекомендуется везде, так как оно не позволяет vue точно определить, какой дочерний элемент был изменен.

Answer 2

Вы используете объект в качестве ключа, поэтому вы получаете эту ошибку.

Одно из быстрых исправлений - изменить l oop следующим образом:

v-for="(portata, index) in menu_ristorante" :key="index"

но , лучше всего было бы добавить уникальный идентификатор (строку или целое число) к каждому из повторяемых объектов и использовать его в качестве ключа.

Buon appetito;)