vue（tify）过渡 - 孩子必须被关键 - 但孩子们甚至没有任何标签

发布于 2025-01-31 05:51:22 字数 721 浏览 0 评论 0原文

我想在vuetify或vue上的列表上使用过渡，但是我一直在遇到错误vue.runtime.esm.js？2b0e：619 [vue warn]：＆lt; transition-group＆gt;孩子必须被关键：＆lt; v-card＆gt;

我尝试了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>

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

并且仍然会遇到错误。所以我想知道我该到底应该钥匙什么？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呆萌少年 2025-02-07 05:51:22

您可以尝试使用片段，请阅读更多在这里

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      usersData: [{email: '[email protected]'}]
    }
  },
  methods: {
    addCard() {
      this.usersData.push({email: '[email protected]'})
    }
  }
})

<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

You can try like following snippet, read more here

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      usersData: [{email: '[email protected]'}]
    }
  },
  methods: {
    addCard() {
      this.usersData.push({email: '[email protected]'})
    }
  }
})

<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

回复收藏 0 原文

~没有更多了~