CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Mark Hill
Mark Hill

Reputation: 1839

Multiple v-for loops with different keys still causing duplicate key error

I am working on a python application that is using Vue.js, and a ticket was thrown back at me with an error of:

[Vue warn]: Duplicate keys detected: ''. This may cause an update error. (found in Root)

Problem is none of the keys in any of the v-for: loops are the same.

They all look like this:

<li class="page-item" v-for="p in pagesArray" :key="p.label+'label'">...

<b-form-checkbox v-for="(skill, index) in visibleSkills" :key="skill.skillname+'-name'">...

<b-form-radio v-for="(bundle, index) in visibleBundles" :key="bundle.bundlename">...

Any insight on this from anywhere, because the stack trace is not helpful, and I've parsed all the docs already.

Upvotes: 3

Views: 2611

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to concatenate the index in order to enforce the uniqueness :

  <li class="page-item" v-for="(p,index) in pagesArray" :key="p.label+'label'+index">
  <b-form-checkbox v-for="(skill, index) in visibleSkills" :key="skill.skillname+'-name'+index">
  <b-form-radio v-for="(bundle, index) in visibleBundles" :key="bundle.bundlename+index">

Upvotes: 2

Related Questions