feat: devops-select与select-input重复key问题 issue TencentBlueKing#8125

yongyiduan · Jun 3, 2024 · 0b31f85 · 0b31f85
1 parent 6f058cd
commit 0b31f85
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/frontend/devops-pipeline/src/components/AtomFormComponent/DevopsSelect/index.vue b/src/frontend/devops-pipeline/src/components/AtomFormComponent/DevopsSelect/index.vue
@@ -21,7 +21,7 @@
             <ul>
                 <template v-if="hasGroup">
                     <li v-for="(item, index) in filteredList"
-                        :key="item.id"
+                        :key="item.id + index"
                         :disabled="item.disabled">
                         <div class="option-group-name">{{ item.name }}</div>
                         <div class="option-group-item"
@@ -41,7 +41,7 @@
                 <template v-else>
                     <li
                         v-for="(item, index) in filteredList"
-                        :key="item.id"
+                        :key="item.id + index"
                         :class="{
                             'option-item': true,
                             active: item.active,

diff --git a/src/frontend/devops-pipeline/src/components/AtomFormComponent/SelectInput/index.vue b/src/frontend/devops-pipeline/src/components/AtomFormComponent/SelectInput/index.vue
@@ -7,7 +7,7 @@
             <ul>
                 <template v-if="hasGroup">
                     <li v-for="(item, index) in filteredList"
-                        :key="item.id"
+                        :key="item.id + index"
                         :disabled="item.disabled">
                         <div class="option-group-name">{{ item.name }}</div>
                         <div class="option-group-item"
@@ -22,7 +22,16 @@
                     </li>
                 </template>
                 <template v-else>
-                    <li class="option-item" v-for="(item, index) in filteredList" :key="item.id" :class="{ active: item.id === value, selected: selectedPointer === index }" :disabled="item.disabled" @click.stop="selectOption(item)" @mouseover="setSelectPointer(index)" :title="item.name">
+                    <li
+                        v-for="(item, index) in filteredList"
+                        class="option-item"
+                        :key="item.id + index"
+                        :class="{ active: item.id === value, selected: selectedPointer === index }"
+                        :disabled="item.disabled"
+                        @click.stop="selectOption(item)"
+                        @mouseover="setSelectPointer(index)"
+                        :title="item.name"
+                    >
                         {{ item.name }}
                     </li>
                 </template>