vue.js - 怎么解决<transition-group> children must be keyed: <li> 这个警告？

Question

控制台的警告是这样的。

[Vue warn]: <transition-group> children must be keyed: <li>

found in

---> <TransitionGroup>
       <ElUploadList> at packages/upload/src/upload-list.vue
         <ElUpload> at packages/upload/src/index.vue
           <Root>

我的html代码是这样，v-for遍历渲染了几个el-upload。百度一下，解决办法说要加key，我在v-for那里和el-upload标签加了都没有用。另外FXJXM是编码，是唯一的。

<div class="body-item" v-for="(item, index) in FXJXMS" :key="item.FXJXM">
    <div class="title">
        <div class="value">{{item.FDATAVALUE}}</div>
        <div class="desc">{{item.FInspectionStandard}}</div>
    </div>
    <div class="buttom">
        <el-radio-group v-model="normals[index]" class="radio-group">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">异常</el-radio>
        </el-radio-group>
        <el-upload :key="item.FXJXM" class="upload" action="/xj/upload" :data="document" :on-change="handleChange" :on-success="uploadSuccess"  :file-list="fileList">
            <el-button size="small" type="primary" class="el-icon-picture" @click="getIndex(index)">拍照</el-button>
        </el-upload>
    </div>
</div>

请问这个警告得怎么解决？？

Answer 1

检查一下 :file-list="fileList" 的传值有没有问题

Answer 2

这个警告是因为在使用 <transition-group> 组件时，你需要在直接子元素（在这个案例中是 <div class="body-item">）上添加 key 而不是在 <el-upload> 上。<transition-group> 需要知道每个子元素的唯一标识符（key）来跟踪它们的身份，以便在列表更新时应用正确的过渡。

在你的代码中，虽然你在 <div class="body-item"> 的父元素上使用了 v-for 和 :key，但 <transition-group> 并不直接包含这些 <div>，因此 Vue 无法识别出它们。

但是，如果你没有直接使用 <transition-group>，而只是看到了与 <transition-group> 相关的警告，那可能是因为你使用的 el-upload 组件（可能是 Element UI 的 el-upload）内部使用了 <transition-group>。在这种情况下，你需要确保传递给 el-upload 组件的列表项（通常是文件列表）中的每个文件都有唯一的 key。

然而，在你的案例中，你似乎并没有在 el-upload 内部使用列表，所以你可能不需要在 el-upload 上添加 key。相反，你应该确保 <div class="body-item"> 的 key 绑定是正确的。

但是，为了完全消除这个警告，并且假设 el-upload-list（可能是 Element UI 的一个组件，它管理上传的文件列表）确实在其内部使用了 <transition-group>，你可能需要确保传递给 el-upload 组件的任何列表（比如文件列表）中的每个项都有唯一的 key。但是，在你的代码中并没有看到这样的列表。

基于你给出的代码，这里是你应该如何修复这个警告的示例：

<div v-for="(item, index) in FXJXMS" :key="item.FXJXM" class="body-item">
    <!-- ... 其他代码 ... -->
    <el-upload class="upload" action="/xj/upload" :data="document" :on-change="handleChange" :on-success="uploadSuccess" :file-list="fileList">
        <el-button size="small" type="primary" class="el-icon-picture" @click="getIndex(index)">拍照</el-button>
    </el-upload>
</div>

注意，我已经将 :key="item.FXJXM" 移动到了 <div class="body-item"> 上，这是正确的做法，因为 v-for 是在这个元素上使用的。如果 item.FXJXM 是唯一的，那么这个警告应该就会消失。