【前端】vue2中的报错：Duplicate keys detected: '0'

前言

     小编在vue前端项目中，遇到了一个错误，解决思路主要集中在v-for的用法上面，key的值不能重复，所以它的取值非常重要，循环嵌套时也需要注意一下。

报错详细内容  

 一、报错图1

原因：v-for取用key值时，key值重复：

   <Select v-model="questionDetail.company" style="width:200px">
            <Option
              v-for="item in companyList"
              :value="item.name"
              :key="item.name"
            >{{ item.name }}</Option>
          </Select>

修改为：key值为索引值

 <Select v-model="questionDetail.company" style="width:200px">
            <Option
              v-for="(item,index) in companyList"
              :value="item.name"
              :key="index"
            >{{ item.name }}</Option>
          </Select>

 

二、报错图2

此原因循环内容重复，itemSecond集合使用了两次。

  <div v-for="(itemSecond,index) in item.listKid" :key="index">
                <MenuItem
                  :name="itemSecond.applicationName" v-if="itemSecond.listKid === null">
                  {{itemSecond.applicationName}}
                </MenuItem>
              </div>
              <div v-for="(itemSecond,index) in item.listKid" :key="index">
                <Submenu :name="itemSecond.applicationName" v-if="itemSecond.listKid !== null">
                  <template slot="title">{{itemSecond.applicationName}}</template>
                  <MenuItem
                    :name="itemThird.applicationName" v-for="(itemThird,index3) in itemSecondNotNull.listKid" :key="index3"
                  >{{itemThird.applicationName}}
                  </MenuItem>
                </Submenu>
              </div>

 改为如下：

  对于itemSecond集合调用了两次循环，其实调用一次即可，如下，加入v-if判断。

  <div v-for="(itemSecond,index) in item.listKid" :key="index">
                <MenuItem
                  :name="itemSecond.applicationName"
                  v-if="itemSecond.listKid === null"
                >{{itemSecond.applicationName}}
                </MenuItem>
                <Submenu
                  :name="itemSecond.applicationName"
                  v-if="itemSecond.listKid !== null"
                >
                  <template slot="title">{{itemSecond.applicationName}}</template>
                  <MenuItem
                    :name="itemThird.applicationName"
                    v-for="(itemThird,index3) in itemSecond.listKid"
                    :key="index3"
                  >{{itemThird.applicationName}}</MenuItem>
                </Submenu>
   </div>

小结

    通过实践，网上查询解决方案，寻求帮助后，这个问题得到了解决。

                                                                           感谢您的访问！