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

Question

我的项目总是用双应用键和TypeError发出警报：无法读取未定义(读取"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>

我的项目总是用duplicated key和TypeError发出警报：无法读取未定义(读取"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"

等等。