控制台报错[Vue warn]:Duplicate keys detected:‘16‘. This may cause an update error.found in ...如何解决?

遇到的问题:

在这里插入图片描述

问题原因:

<script>
    export default{
    
    
       methods:{
    
    
           getList(){
    
    
               listNotice(this.queryparams,(this.queryparams.channelId=16)).then(res=>{
    
    
                   ...
               })
           },
            ...                                                                     
       }
    }
</script>

从以上代码可以看出,接口请求的参数中channelId的值是"16",以下代码table中row-key="channelId"绑定了重复的key值channelId (“16”),报错是因为在vue框架中每个元素在列表渲染中必须具有唯一的key值。

<el-table
  v-loading="loading"          
  :data="noticeList"
  row-key="channelId"
  @selection-change="handleSelectionChange"         
 >
    ...
</el-table>

解决办法:

确保列表中每个元素都有一个唯一的key值,可以为每个元素绑定一个独一无二的属性或者从数据中选择一个唯一标识符。

此外,还要确保其他地方有没有使用相同是key值,以免出现其他的更新错误。

猜你喜欢

转载自blog.csdn.net/weixin_61529967/article/details/132356898