From 7188f26a456d3af5b5aed4e7435f793d80a20768 Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Tue, 19 May 2026 23:20:41 -0400
Subject: [PATCH 1/2] Enable ESLint rule `vue/valid-v-for`

---
 web/eslint.config.ts                          | 1 -
 web/src/components/projects/DatasetSelect.vue | 2 ++
 web/src/components/projects/ProjectConfig.vue | 1 +
 web/src/components/sidebars/DatasetsPanel.vue | 1 +
 web/src/components/sidebars/SideBars.vue      | 3 +++
 5 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/eslint.config.ts b/web/eslint.config.ts
index 1869046a..279568d8 100644
--- a/web/eslint.config.ts
+++ b/web/eslint.config.ts
@@ -22,7 +22,6 @@ export default defineConfigWithVueTs(
       "@typescript-eslint/no-explicit-any": "off",
       // Temporary ignores until rules can be fixed
       "vue/require-v-for-key": "off",
-      "vue/valid-v-for": "off",
     },
   },
   skipFormatting,
diff --git a/web/src/components/projects/DatasetSelect.vue b/web/src/components/projects/DatasetSelect.vue
index d07c632a..f3c1d2b0 100644
--- a/web/src/components/projects/DatasetSelect.vue
+++ b/web/src/components/projects/DatasetSelect.vue
@@ -170,6 +170,7 @@ function submitDelete() {
             <div class="mb-2 ml-2">
               <v-chip
                 v-for="tag in dataset.tags"
+                :key="tag"
                 :text="tag"
                 variant="outlined"
                 size="small"
@@ -211,6 +212,7 @@ function submitDelete() {
             <div>
               <v-chip
                 v-for="project in getDatasetProjects(datasetToDelete.id)"
+                :key="project.id"
                 :text="project.name"
               />
             </div>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index b1f3e92a..0e0e64f0 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -387,6 +387,7 @@ watch(
           <v-list class="transparent" color="primary" selectable>
             <v-list-item
               v-for="project in filteredProjects"
+              :key="project.id"
               :title="project.name"
               :active="project.id === selectedProject?.id"
               @click="() => selectProject(project)"
diff --git a/web/src/components/sidebars/DatasetsPanel.vue b/web/src/components/sidebars/DatasetsPanel.vue
index cab3b6b5..10bd2f7f 100644
--- a/web/src/components/sidebars/DatasetsPanel.vue
+++ b/web/src/components/sidebars/DatasetsPanel.vue
@@ -119,6 +119,7 @@ function toggleSelected(items: Layer[]) {
             <div>
               <v-chip
                 v-for="tag in dataset.tags"
+                :key="tag"
                 :text="tag"
                 variant="outlined"
                 size="small"
diff --git a/web/src/components/sidebars/SideBars.vue b/web/src/components/sidebars/SideBars.vue
index 4073e93d..40b19a0e 100644
--- a/web/src/components/sidebars/SideBars.vue
+++ b/web/src/components/sidebars/SideBars.vue
@@ -102,6 +102,7 @@ function togglePanelVisibility(id: string) {
           v-for="(panel, index) in panelStore.panelArrangement.filter(
             (p) => p.dock == 'left',
           )"
+          :key="panel.id"
           :id="panel.id"
           :bottom="
             index ==
@@ -194,6 +195,7 @@ function togglePanelVisibility(id: string) {
               v-for="item in panelStore.panelArrangement.filter(
                 (p) => p.closeable,
               )"
+              :key="item.id"
               @click="togglePanelVisibility(item.id)"
             >
               <v-checkbox-btn
@@ -209,6 +211,7 @@ function togglePanelVisibility(id: string) {
           v-for="(panel, index) in panelStore.panelArrangement.filter(
             (p) => p.dock == 'right',
           )"
+          :key="panel.id"
           :id="panel.id"
           :bottom="
             index ==

From af430a980058917e594d7187baada6a8d7372140 Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Tue, 19 May 2026 23:56:14 -0400
Subject: [PATCH 2/2] Enable ESLint rule `vue/require-v-for-key`

---
 web/eslint.config.ts                           | 2 --
 web/src/components/ControlsBar.vue             | 4 +++-
 web/src/components/projects/DatasetSelect.vue  | 6 +++++-
 web/src/components/projects/DatasetUpload.vue  | 1 +
 web/src/components/sidebars/ColormapEditor.vue | 6 +++++-
 web/src/components/sidebars/DatasetsPanel.vue  | 6 +++++-
 web/src/components/sidebars/LayerStyle.vue     | 3 +++
 web/src/components/sidebars/LayersPanel.vue    | 1 +
 web/src/components/sidebars/LegendPanel.vue    | 6 +++++-
 9 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/web/eslint.config.ts b/web/eslint.config.ts
index 279568d8..4ce4da23 100644
--- a/web/eslint.config.ts
+++ b/web/eslint.config.ts
@@ -20,8 +20,6 @@ export default defineConfigWithVueTs(
       "vue/valid-v-slot": ["error", { allowModifiers: true }],
       // `any` is used everywhere and will be difficult to eliminate
       "@typescript-eslint/no-explicit-any": "off",
-      // Temporary ignores until rules can be fixed
-      "vue/require-v-for-key": "off",
     },
   },
   skipFormatting,
diff --git a/web/src/components/ControlsBar.vue b/web/src/components/ControlsBar.vue
index 8c7d3615..6562e5ca 100644
--- a/web/src/components/ControlsBar.vue
+++ b/web/src/components/ControlsBar.vue
@@ -570,7 +570,9 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
             </v-window-item>
           </v-window>
           <v-spacer />
-          <div v-for="err in jsonErrors">Error: {{ err.message }}</div>
+          <div v-for="(err, index) in jsonErrors" :key="index">
+            Error: {{ err.message }}
+          </div>
           <div v-if="!jsonErrors?.length">Map Preview:</div>
           <div
             id="basemap-preview-new"
diff --git a/web/src/components/projects/DatasetSelect.vue b/web/src/components/projects/DatasetSelect.vue
index f3c1d2b0..f0076c05 100644
--- a/web/src/components/projects/DatasetSelect.vue
+++ b/web/src/components/projects/DatasetSelect.vue
@@ -176,7 +176,11 @@ function submitDelete() {
                 size="small"
               />
             </div>
-            <div v-for="layer in dataset.layers" class="item-title">
+            <div
+              v-for="layer in dataset.layers"
+              :key="layer.id"
+              class="item-title"
+            >
               <div style="text-wrap: wrap; align-items: center; width: 100%">
                 {{ layer.name }}
               </div>
diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
index 30f63fc0..8a76e326 100644
--- a/web/src/components/projects/DatasetUpload.vue
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -224,6 +224,7 @@ watch(open, () => {
             <span class="secondary-text">Similar Existing Datasets:</span>
             <div
               v-for="dataset in similarExisting"
+              :key="dataset.id"
               style="font-size: 0.8rem; margin-left: 10px"
             >
               {{ dataset.name }}
diff --git a/web/src/components/sidebars/ColormapEditor.vue b/web/src/components/sidebars/ColormapEditor.vue
index 17037b75..a0b6eb06 100644
--- a/web/src/components/sidebars/ColormapEditor.vue
+++ b/web/src/components/sidebars/ColormapEditor.vue
@@ -277,7 +277,11 @@ onMounted(init);
         </div>
       </div>
       <div style="height: 200px; overflow-y: auto">
-        <div v-for="(marker, index) in markers" class="py-2 marker-row">
+        <div
+          v-for="(marker, index) in markers"
+          :key="index"
+          class="py-2 marker-row"
+        >
           <v-menu :close-on-content-click="false" open-on-hover location="end">
             <template v-slot:activator="{ props }">
               <div
diff --git a/web/src/components/sidebars/DatasetsPanel.vue b/web/src/components/sidebars/DatasetsPanel.vue
index 10bd2f7f..4f19648c 100644
--- a/web/src/components/sidebars/DatasetsPanel.vue
+++ b/web/src/components/sidebars/DatasetsPanel.vue
@@ -126,7 +126,11 @@ function toggleSelected(items: Layer[]) {
                 class="ml-3 mb-2"
               />
             </div>
-            <div v-for="layer in dataset.layers" class="item-title">
+            <div
+              v-for="layer in dataset.layers"
+              :key="layer.id"
+              class="item-title"
+            >
               <div
                 style="
                   text-wrap: wrap;
diff --git a/web/src/components/sidebars/LayerStyle.vue b/web/src/components/sidebars/LayerStyle.vue
index e3c86470..c581714e 100644
--- a/web/src/components/sidebars/LayerStyle.vue
+++ b/web/src/components/sidebars/LayerStyle.vue
@@ -796,6 +796,7 @@ onMounted(resetCurrentStyle);
                     v-for="group in currentStyleSpec.colors.filter(
                       (c) => c.name === currentGroups['color'],
                     )"
+                    :key="group.name"
                   >
                     <tr v-if="currentGroups['color'] !== 'all'">
                       <td><v-label>Band</v-label></td>
@@ -1171,6 +1172,7 @@ onMounted(resetCurrentStyle);
                     v-for="group in currentStyleSpec.colors.filter(
                       (c) => c.name === currentGroups['color'],
                     )"
+                    :key="group.name"
                   >
                     <tr v-if="currentGroups['color'] !== 'all'">
                       <td><v-label>Feature Type</v-label></td>
@@ -1639,6 +1641,7 @@ onMounted(resetCurrentStyle);
                     v-for="group in currentStyleSpec.sizes.filter(
                       (c) => c.name === currentGroups['size'],
                     )"
+                    :key="group.name"
                   >
                     <tr>
                       <td><v-label>Size Choice</v-label></td>
diff --git a/web/src/components/sidebars/LayersPanel.vue b/web/src/components/sidebars/LayersPanel.vue
index 21beae4e..0cc88d5c 100644
--- a/web/src/components/sidebars/LayersPanel.vue
+++ b/web/src/components/sidebars/LayersPanel.vue
@@ -231,6 +231,7 @@ function setLayerActive(layer: Layer, active: boolean) {
                 />
                 <div
                   v-for="frame in getLayerCurrentFrames(element)"
+                  :key="frame.id"
                   style="display: flex; justify-content: space-between"
                 >
                   <span> <i>Frame:</i> {{ frame.name }} </span>
diff --git a/web/src/components/sidebars/LegendPanel.vue b/web/src/components/sidebars/LegendPanel.vue
index 712eeb36..aac655c7 100644
--- a/web/src/components/sidebars/LegendPanel.vue
+++ b/web/src/components/sidebars/LegendPanel.vue
@@ -131,6 +131,7 @@ function getColorPropsCoverage(layer: Layer) {
           {{ layer.name }}
           <div
             v-for="colormap_preview in getColormapPreviews(layer)"
+            :key="colormap_preview.name"
             class="ml-6"
           >
             <div v-if="getColormapPreviews(layer).length > 1">
@@ -171,7 +172,10 @@ function getColorPropsCoverage(layer: Layer) {
                       />
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
-                      <div v-for="row in colormap_preview.valueColors">
+                      <div
+                        v-for="(row, index) in colormap_preview.valueColors"
+                        :key="index"
+                      >
                         <div
                           v-if="row"
                           class="d-flex"