美文网首页
Vue 报错 Duplicate keys detected:

Vue 报错 Duplicate keys detected:

作者: VinceWen | 来源:发表于2020-05-21 11:13 被阅读0次

    错误原因
    一个父元素中包含两个同级的v-for子级。

    解决方案
    原代码:

    <div class="parent">
      <div class="child" v-for="(item, index) in items1" :key="index"></div>
      <div class="child" v-for="(item, index) in items2" :key="index"></div>
    </div>
    

    修改后

    <div class="parent">
      <div>
        <div class="child" v-for="(item, index) in items1" :key="index"></div>
      </div>
      <div>
        <div class="child" v-for="(item, index) in items2" :key="index"></div>
      </div>
    </div>
    

    或者

    <div class="parent">
      <div class="child" v-for="(item, index) in items1" :key="index"></div>
      <div class="child" v-for="(item, index) in items2" :key="index + 10"></div>
    </div>
    

    相关文章

      网友评论

          本文标题:Vue 报错 Duplicate keys detected:

          本文链接:https://www.haomeiwen.com/subject/gqczohtx.html