vue.runtime.esm.js?2b0e:619 [Vue warn]: <transition-group> children must be keyed: <li>
1.错误分析<!-- 文件列表 --><transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"><li :key="file.uid" v-for="(file,index) in fileList"c
·
1.错误分析
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.uid" v-for="(file,index) in fileList" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="file.url" :underline="false" target="_blank">
<span class="el-icon-document"> {{ file.name }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
</div>
</li>
</transition-group>
打印的file的内容,可以看出file.uid 是数字
name: "01-log.png"
status: "success"
uid: 1640826609292
url: "http://127.0.0.1:6070/files/2021-12-30/a528c157ac3b4a3489f8d1e649bfebff.png"
2.修改办法
将key改为: :key="''+file.uid" 让key值为字符串即可解决问题
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="''+file.uid" v-for="(file,index) in fileList" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="file.url" :underline="false" target="_blank">
<span class="el-icon-document"> {{ file.name }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
</div>
</li>
</transition-group>
更多推荐
已为社区贡献6条内容
所有评论(0)