I want to use a transition on a list on vuetify or vue and yet I keep getting the error vue.runtime.esm.js?2b0e:619 [Vue warn]: <transition-group> children must be keyed: <v-card>
I tried the vuetify way
<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 well as the vue way:
<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>
and still get the error. So I wonder what exactly should I key?
You can try like following snippet, read more here
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>