问答

vue 使用transitioin-group 提示需要绑定key,但已经绑定了

作者:admin 2021-07-08 我要评论

提示: vue.runtime.esm.js?2b0e:619 [Vue warn]: transition-group children must be keyed: BookshelfItem 我的代码: template div class="bookshelf-list" t...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

提示:

vue.runtime.esm.js?2b0e:619 [Vue warn]: <transition-group> children must be keyed: <BookshelfItem>

我的代码:

<template>
    <div class="bookshelf-list">
        <transition-group tag="div" class="bl-list">
            <bookshelf-item
                v-for="(book, index) in shelfBooks"
                :book="book"
                :index="index"
                :key="book.id"></bookshelf-item>
            <item-of-add :key="Math.random()" />
        </transition-group>
    </div>
</template>

可以看到,我的key已经绑定值了,而且也是唯一的值(一本书只有一个ID),我的另一个组件这么写没问题。
如果说有不同的话就是我那另一个组件没有嵌套其他组件,类似的,我的嵌套的组件都绑定上key,结果还是一样,报这个问题

求解,万分感谢

###

问题原因:
因为我是根据v-for遍历数据进行展示的,key绑定的数据是使用book的id(book.id),然而如果遍历到一个分类,就没有唯一的id了,所以就会返回undefined, 因此绑定的不是唯一key,即报错

###

v-bind:key 这样写也不行?

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue 使用transitioin-group 提示需要绑

    vue 使用transitioin-group 提示需要绑

  • v2ray配置tcp+ssl  里面的证书是怎么来

    v2ray配置tcp+ssl 里面的证书是怎么来

  • react里面form表单里面的输入框无法输

    react里面form表单里面的输入框无法输

  • 单页面组件的&lt;template&gt;

    单页面组件的&lt;template&gt;

腾讯云代理商
海外云服务器