如何调试此重复错误 (Vue.js 2)

Question

我的项目总是发出带有重复密钥的警报和类型错误：无法读取未定义的属性（读取 'form'）警报，但我不知道我将如何解决以及如何更改我的密钥？有人可以帮助我吗？

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" class="tree-view">
        <h5>R{{ rev }}</h5>

        <div
          class="tree-item"
          v-for="vers in OpenModalList.Data.filter((x) => x.RevisionNo == rev)"
          :key="vers.Id"
        >
          <span :class="GetInput().Id == vers.Id ? 'font-weight-bold' : ''">
            <i
              class="fas fa-check-circle releasedVersIcon"
              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" class="tree-view">
        <h5>R{{ rev }}</h5>

        <div
          class="tree-item"
          v-for="vers in CloneModalList.Data.filter((x) => x.RevisionNo == rev)"
          :key="vers.Id"
        >
          <span :class="GetInput().Id == vers.Id ? 'font-weight-bold' : ''">
            <i
              class="fas fa-check-circle releasedVersIcon"
              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"
        class="tree-view"
      >
        <h5>R{{ rev }}</h5>

        <div
          class="tree-item"
          v-for="vers in RevisionModalList.Data.filter(
            (x) => x.RevisionNo == rev
          )"
          :key="vers.Id"
        >
          <span :class="GetInput().Id == vers.Id ? 'font-weight-bold' : ''">
            <i
              class="fas fa-check-circle releasedVersIcon"
              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>

我的项目总是发出带有重复密钥的警报和类型错误：无法读取未定义的属性（读取 'form'）警报，但我不知道我将如何解决以及如何更改我的密钥？有人可以帮助我吗？

Answer 1

您的重复键错误是因为您在代码中多次使用同一个键：

:key="vers.Id"

例如，如果您的 Id 为 1，则您的 :key 为 vers.1。您在 HTML 中不止一次这样做，因此有多个键具有相同的 ID，因此重复重复的 ID 错误。

你可以这样做：

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

或者提供一个 HTML id 并将其添加到 id，例如：

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

等等

如何调试此重复错误 (Vue.js 2)

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

vue.js

vuejs2