我如何除錯這個重復的錯誤（Vue.js2）

我的專案總是使用重復鍵和 TypeError 發出警報：無法讀取未定義的屬性（讀取“表單”）警報，但我不知道我將如何解決以及如何更改我的鍵？有誰能夠幫我？

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>

我的專案總是使用重復鍵和 TypeError 發出警報：無法讀取未定義的屬性（讀取“表單”）警報，但我不知道我將如何解決以及如何更改我的鍵？有誰能夠幫我？

uj5u.com熱心網友回復：

您的重復鍵錯誤是因為您在代碼中多次使用相同的鍵：

: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 Vuejs2

上一篇：VueJS3/Vuex-如何顯示嵌套json結果中的資料

下一篇：如何使用VueJS/Webpack在摩納哥加載自定義語言