Quiero usar una transición en una lista en vuetify o vue y, sin embargo, sigo recibiendo el error vue.runtime.esm.js?2b0e:619 [Vue warn]: <transition-group> children must be keyed: <v-card>
Probé la forma de vuetify
<v-fade-transition group tag="v-card"> <v-card v-for="(item, index) in usersData" :key="item.email" class="pa-5 my-7"> {{item}}, {{index}} </v-card> </v-fade-transition>así como la forma vue:
<transition-group name="list" tag="v-card"> <v-card v-for="(item, index) in usersData" :key="item.email" class="pa-5 my-7"> {{item}}, {{index}} </v-card> </transition-group>y todavía obtener el error. Así que me pregunto qué debo teclear exactamente.
Puede intentar seguir el siguiente fragmento, lea más aquí
new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { usersData: [{email: 'aa@a.com'}] } }, methods: { addCard() { this.usersData.push({email: 'dd@a.com'}) } } }) <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <div id="app"> <v-app> <v-main> <v-container> <v-btn elevation="2" @click="addCard">add</v-btn> <transition-group name="scale-transition" tag="v-card" appear> <v-card v-for="(item, index) in usersData" :key="index" class="pa-5 my-7"> {{item}}, {{index}} </v-card> </transition-group> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>