Chore: provide a key with v-for (#11891)

examples/components/side-nav.vue

@@ -142,7 +142,10 @@
           </li>
         </ul>
       </li>
-      <li class="nav-item" v-for="item in data">
+      <li
+        class="nav-item"
+        v-for="(item, key) in data"
+        :key="key">
         <a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
         <a v-if="item.href" :href="item.href" target="_blank">{{item.name}}</a>
         <router-link
@@ -153,7 +156,10 @@
           v-text="item.title || item.name">
         </router-link>
         <ul class="pure-menu-list sub-nav" v-if="item.children">
-          <li class="nav-item" v-for="navItem in item.children">
+          <li
+            class="nav-item"
+            v-for="(navItem, key) in item.children"
+            :key="key">
             <router-link
               class=""
               active-class="active"
@@ -164,13 +170,18 @@
           </li>
         </ul>
         <template v-if="item.groups">
-          <div class="nav-group" v-for="group in item.groups">
+          <div
+            class="nav-group"
+            v-for="(group, key) in item.groups"
+            :key="key"
+            >
             <div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
             <ul class="pure-menu-list">
               <li
                 class="nav-item"
-                v-for="navItem in group.list"
-                v-if="!navItem.disabled">
+                v-for="(navItem, key) in group.list"
+                v-if="!navItem.disabled"
+                :key="key">
                 <router-link
                   active-class="active"
                   :to="base + navItem.path"

packages/date-picker/src/basic/date-table.vue

@@ -9,15 +9,17 @@
     <tbody>
     <tr>
       <th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
-      <th v-for="week in WEEKS">{{ t('el.datepicker.weeks.' + week) }}</th>
+      <th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
     </tr>
     <tr
       class="el-date-table__row"
-      v-for="row in rows"
-      :class="{ current: isWeekActive(row[1]) }">
+      v-for="(row, key) in rows"
+      :class="{ current: isWeekActive(row[1]) }"
+      :key="key">
       <td
-        v-for="cell in row"
-        :class="getCellClasses(cell)">
+        v-for="(cell, key) in row"
+        :class="getCellClasses(cell)"
+        :key="key">
         <div>
           <span>
             {{ cell.text }}

packages/date-picker/src/basic/time-spinner.vue

@@ -45,7 +45,8 @@
           @click="handleClick('seconds', { value: key, disabled: false })"
           v-for="(second, key) in 60"
           class="el-time-spinner__item"
-          :class="{ 'active': key === seconds }">{{ ('0' + key).slice(-2) }}</li>
+          :class="{ 'active': key === seconds }"
+          :key="key">{{ ('0' + key).slice(-2) }}</li>
       </el-scrollbar>
     </template>
     <template v-if="arrowControl">
@@ -58,7 +59,8 @@
           <li
             class="el-time-spinner__item"
             :class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
-            v-for="hour in arrowHourList">{{ hour === undefined ? '' : ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + amPm(hour) }}</li>
+            v-for="(hour, key) in arrowHourList"
+            :key="key">{{ hour === undefined ? '' : ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + amPm(hour) }}</li>
         </ul>
       </div>
       <div
@@ -70,7 +72,8 @@
           <li
             class="el-time-spinner__item"
             :class="{ 'active': minute === minutes }"
-            v-for="minute in arrowMinuteList">
+            v-for="(minute, key) in arrowMinuteList"
+            :key="key">
             {{ minute === undefined ? '' : ('0' + minute).slice(-2) }}
           </li>
         </ul>
@@ -83,9 +86,10 @@
         <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
         <ul class="el-time-spinner__list" ref="seconds">
           <li
+            v-for="(second, key) in arrowSecondList"
             class="el-time-spinner__item"
             :class="{ 'active': second === seconds }"
-            v-for="second in arrowSecondList">
+            :key="key">
             {{ second === undefined ? '' : ('0' + second).slice(-2) }}
           </li>
         </ul>

packages/date-picker/src/panel/date-range.vue

@@ -13,7 +13,8 @@
           <button
             type="button"
             class="el-picker-panel__shortcut"
-            v-for="shortcut in shortcuts"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
             @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
         </div>
         <div class="el-picker-panel__body">

packages/date-picker/src/panel/date.vue

@@ -13,7 +13,8 @@
           <button
             type="button"
             class="el-picker-panel__shortcut"
-            v-for="shortcut in shortcuts"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
             @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
         </div>
         <div class="el-picker-panel__body">

packages/rate/src/main.vue

@@ -9,12 +9,13 @@
     :aria-valuemax="max"
     tabindex="0">
     <span
-      v-for="item in max"
+      v-for="(item, key) in max"
       class="el-rate__item"
       @mousemove="setCurrentValue(item, $event)"
       @mouseleave="resetCurrentValue"
       @click="selectValue(item)"
-      :style="{ cursor: rateDisabled ? 'auto' : 'pointer' }">
+      :style="{ cursor: rateDisabled ? 'auto' : 'pointer' }"
+      :key="key">
       <i
         :class="[classes[item - 1], { 'hover': hoverIndex === item }]"
         class="el-rate__icon"

packages/slider/src/main.vue

@@ -45,7 +45,8 @@
       </slider-button>
       <div
         class="el-slider__stop"
-        v-for="item in stops"
+        v-for="(item, key) in stops"
+        :key="key"
         :style="vertical ? { 'bottom': item + '%' } : { 'left': item + '%' }"
         v-if="showStops">
       </div>