老师，为什么这里的key要等于item？？

为什么history的v-for的时候，:key='item'？？

我这样写:key='index'的时候报错了，改成item的时候就行了，为什么这样？？

<transition-group name="historyItem">

<li class="history-item" v-for="(item, index) in historys" :key="index"

@click="$_search_selectItem(item)">

<div class="historyItem" >{{item.hotWord}}</div>

</li>

</transition-group>

</ul>

源自：实战：Vue 完成分类、搜索页 2-5 历史搜索

收起

2回答

好帮手慕慕子 2020-03-29 15:37:02

同学你好，根据同学粘贴的这部分代码，因为使用transition-group实现动画过渡，必须要给它下面的子元素添加不同的key值，否则就会出现报错信息。

建议：可以参考如下两种方式进行调整（选择其中一种即可）

1、给search-wrapper和 search-confirm 添加不同的key值。示例：

2、将transition-group换成transition过渡，将所有内容放在一个div下。

同学可以测试理解下，祝学习愉快~

好帮手慕星星 2020-03-28 19:28:35

同学你好，这边测试代码是没有问题的，不过history已经是数组了，item代表每一项，显示的时候直接用item就好，没有hotWord属性。参考：

建议重新测试下，祝学习愉快！

提问者 Syrena3447375 #1

老师，那我这里，明明没有用到key，为什么会报这两个错？ vue.esm.js?efeb:628 [Vue warn]: <transition-group> children must be keyed: <div> vue.esm.js?efeb:628 [Vue warn]: <transition-group> children must be keyed: <SearchConfirm> <template> <transition-group name="search"> <div class="search-wrapper"> <div class="g-header-container"> <search-header></search-header> </div> <div class="g-content-container"> <search-scroll> <search-hot></search-hot> <search-history @show-confirm="showConfirm"></search-history> </search-scroll> </div> </div> <search-confirm :isShow='isShow' @close='hideConfirm'></search-confirm> </transition-group> </template>

2020-03-29 10:33:03