Lint frontend

frontend/components/rune/Page.vue

@@ -21,13 +21,13 @@ const { data: stylesData }: PerkStylesResponse = await useFetch(
 )
 watch(
   () => props.primaryStyleId,
-  async (newP, oldP) => {
+  async (_newP, _oldP) => {
     refreshStyles()
   }
 )
 watch(
   () => props.secondaryStyleId,
-  async (newP, oldP) => {
+  async (_newP, _oldP) => {
     refreshStyles()
   }
 )
@@ -55,9 +55,14 @@ refreshStyles()
           :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)"
         />
       </div>
-      <div v-for="slot in primaryStyle.slots.slice(0, 1)" class="rune-slot">
+      <div
+        v-for="(slot, slotIndex) in primaryStyle.slots.slice(0, 1)"
+        :key="slotIndex"
+        class="rune-slot"
+      >
         <NuxtImg
           v-for="perk in slot.perks"
+          :key="perk"
           width="48"
           :class="
             'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')
@@ -65,23 +70,33 @@ refreshStyles()
           :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
         />
       </div>
-      <div v-for="slot in primaryStyle.slots.slice(1, 4)" class="rune-slot">
+      <div
+        v-for="(slot, slotIndex) in primaryStyle.slots.slice(1, 4)"
+        :key="slotIndex"
+        class="rune-slot"
+      >
         <NuxtImg
           v-for="perk in slot.perks"
+          :key="perk"
           width="48"
           :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')"
           :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
         />
       </div>
     </div>
-    <div class="rune-spacer-bar"/>
+    <div class="rune-spacer-bar" />
     <div class="rune-holder" style="align-content: end">
       <div class="rune-slot">
-        <img style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" >
+        <img style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" />
       </div>
-      <div v-for="slot in secondaryStyle.slots.slice(1, 4)" class="rune-slot">
+      <div
+        v-for="(slot, slotIndex) in secondaryStyle.slots.slice(1, 4)"
+        :key="slotIndex"
+        class="rune-slot"
+      >
         <NuxtImg
           v-for="perk in slot.perks"
+          :key="perk"
           width="48"
           :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')"
           :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"

frontend/components/rune/Selector.vue

@@ -27,7 +27,7 @@ const { data: stylesData }: PerkStylesResponse = await useFetch(
 )
 watch(
   () => props.runes,
-  (newRunes, oldRunes) => {
+  (_newRunes, _oldRunes) => {
     currentlySelectedPage.value = 0
     primaryStyles.value = Array(props.runes.length)
     secondaryStyles.value = Array(props.runes.length)
@@ -72,7 +72,7 @@ function runeSelect(index: number) {
       :selection-ids="runes[currentlySelectedPage].selections"
     />
     <div style="display: flex; margin-top: 20px; justify-content: center">
-      <div v-for="(_, i) in runes" @click="runeSelect(i)">
+      <div v-for="(_, i) in runes" :key="i" @click="runeSelect(i)">
         <div
           :class="
             'rune-selector-entry ' +