How can I debug this dublicate error (Vue.js 2)-CodePudding

My project always giving alert with dublicated key and TypeError: Cannot read properties of undefined (reading 'form') alert but I dont know how I will be solve and how can I change my keys? Can anybody help me?

enter code here`  vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: '314'. This may cause an update error.

found in

---> <ElectricWV> at src/components/electric/Electric-WV.vue
       <MainParameters> at src/components/electric/MainParameters/MainParameters.vue
         <BTab>
           <BTabs>
             <Electric> at src/views/Electric.vue
               <Pane>
                 <Splitpanes>
                   <Project> at src/views/Project.vue
                     <App> at src/App.vue
                       <Root>`

<div v-for="rev in OpenModalList.Revisions" :key="rev" >
        <h5>R{{ rev }}</h5>

        <div
          
          v-for="vers in OpenModalList.Data.filter((x) => x.RevisionNo == rev)"
          :key="vers.Id"
        >
          <span :>
            <i
              
              v-if="vers.ActiveVersion"
              :style="!vers.ActiveRevision == true ? 'color:#00bcd4' : ''"
            ></i>
            V{{ vers.VersionNo }} : {{ vers.Description }}
            <b-radio
              v-if="GetInput().Id != vers.Id"
              :value="vers"
              v-model="OpenModalSelected"
              style="width: 16px; float: right; margin-top: -1px"
            ></b-radio>
          </span>
        </div>
      </div>
      
      
      
      <div v-for="rev in CloneModalList.Revisions" :key="rev" >
        <h5>R{{ rev }}</h5>

        <div
          
          v-for="vers in CloneModalList.Data.filter((x) => x.RevisionNo == rev)"
          :key="vers.Id"
        >
          <span :>
            <i
              
              v-if="vers.ActiveVersion"
            ></i>
            V{{ vers.VersionNo }} : {{ vers.Description }}
            <b-radio
              :value="vers"
              v-model="CloneModalSelected"
              style="width: 16px; float: right; margin-top: -1px"
            ></b-radio>
          </span>
        </div>
      </div>
      
      
      
      <div
        v-for="rev in RevisionModalList.Revisions"
        :key="rev"
        
      >
        <h5>R{{ rev }}</h5>

        <div
          
          v-for="vers in RevisionModalList.Data.filter(
            (x) => x.RevisionNo == rev
          )"
          :key="vers.Id"
        >
          <span :>
            <i
              
              v-if="vers.ActiveVersion"
              :style="!vers.ActiveRevision == true ? 'color:#00bcd4' : ''"
            ></i>
            V{{ vers.VersionNo }} : {{ vers.Description }}
            <b-radio
              :value="vers"
              v-model="RevisionModalSelected"
              style="width: 16px; float: right; margin-top: -1px"
            ></b-radio>
          </span>
        </div>
      </div>

CodePudding user response：

Your duplicate key error is because you're using the same key more than once in your code:

:key="vers.Id"

If your Id for example is 1, your :key is vers.1. You're doing this more than once in your HTML so there are multiple keys with the same Id, hence duplicate the duplicate Id error.

You could do:

:key="vers.Id   Math.random()"

Or provide a HTML id and add that to the id, for example:

:key="vers.Id   'div1'" id="div1"
:key="vers.Id   'div2'" id="div2"

etc.