Vue: don't use loop index for :key

panel/lab/basics/design/colors/index.vue

@@ -12,7 +12,7 @@
 				style="--columns: 9; gap: var(--spacing-3)"
 			>
 				<k-box
-					v-for="(step, index) in steps"
+					v-for="step in steps"
 					:key="step"
 					:style="{
 						background: `var(--color-${name}-${step})`,

panel/lab/basics/icons/2_files/index.vue

@@ -14,7 +14,7 @@
 						</tr>
 					</thead>
 					<tbody>
-						<tr v-for="(preview, index) in previews" :key="index">
+						<tr v-for="preview in previews" :key="$helper.uid()">
 							<td class="k-table-cell">
 								<k-icon-frame
 									:icon="getIcon(preview)"

panel/src/components/Collection/Item.vue

@@ -42,8 +42,8 @@
 		>
 			<!-- Buttons -->
 			<k-button
-				v-for="(button, buttonIndex) in buttons"
-				:key="'button-' + buttonIndex"
+				v-for="button in buttons"
+				:key="button.id ?? $helper.uid()"
 				v-bind="button"
 			/>
 

panel/src/components/Collection/Items.vue

@@ -33,7 +33,7 @@
 		<template v-for="(item, itemIndex) in items">
 			<slot v-bind="{ item, itemIndex }">
 				<k-item
-					:key="item.id ?? itemIndex"
+					:key="item.id ?? $helper.uid()"
 					v-bind="item"
 					:class="{ 'k-draggable-item': sortable && item.sortable }"
 					:image="imageOptions(item)"

panel/src/components/Dialogs/ErrorDialog.vue

@@ -10,14 +10,14 @@
 	>
 		<k-text>{{ message }}</k-text>
 		<dl v-if="detailsList.length" class="k-error-details">
-			<template v-for="(detail, index) in detailsList">
-				<dt :key="'detail-label-' + index">
+			<template v-for="detail in detailsList">
+				<dt :key="'detail-label-' + detail.label">
 					{{ detail.label }}
 				</dt>
-				<dd :key="'detail-message-' + index">
+				<dd :key="'detail-message-' + detail.label">
 					<template v-if="typeof detail.message === 'object'">
 						<ul>
-							<li v-for="(msg, msgIndex) in detail.message" :key="msgIndex">
+							<li v-for="msg in detail.message" :key="msg">
 								{{ msg }}
 							</li>
 						</ul>

panel/src/components/Drawers/Drawer.vue

@@ -19,7 +19,7 @@
 					<template v-for="(option, index) in options">
 						<template v-if="option.dropdown">
 							<k-button
-								:key="'btn-' + index"
+								:key="'dropdown-btn-' + index"
 								v-bind="option"
 								class="k-drawer-option"
 								@click="$refs['dropdown-' + index][0].toggle()"

panel/src/components/Forms/Input/CalendarInput.vue

@@ -42,8 +42,8 @@
 			<tbody>
 				<tr v-for="week in weeks" :key="'week_' + week">
 					<td
-						v-for="(day, dayIndex) in days(week)"
-						:key="'day_' + dayIndex"
+						v-for="day in days(week)"
+						:key="'day_' + day"
 						:aria-current="isToday(day) ? 'date' : false"
 						:aria-selected="isSelected(day) ? 'date' : false"
 						class="k-calendar-day"

panel/src/components/Forms/Input/CheckboxesInput.vue

@@ -15,7 +15,7 @@
 				class="k-grid"
 				data-variant="choices"
 			>
-				<li v-for="(choice, index) in choices" :key="index">
+				<li v-for="choice in choices" :key="choice.value">
 					<k-choice-input
 						v-bind="choice"
 						@input="input(choice.value, $event)"

panel/src/components/Forms/Input/ColoroptionsInput.vue

@@ -6,7 +6,7 @@
 	>
 		<legend class="sr-only">{{ $t("options") }}</legend>
 		<ul>
-			<li v-for="(choice, index) in choices" :key="index">
+			<li v-for="choice in choices" :key="choice.value">
 				<label :title="choice.title">
 					<input
 						:autofocus="autofocus && index === 0"

panel/src/components/Forms/Input/RadioInput.vue

@@ -12,7 +12,7 @@
 				class="k-grid"
 				data-variant="choices"
 			>
-				<li v-for="(choice, index) in choices" :key="index">
+				<li v-for="choice in choices" :key="choice.value">
 					<k-choice-input
 						v-bind="choice"
 						@click.native.stop="toggle(choice.value)"

panel/src/components/Forms/Input/TogglesInput.vue

@@ -13,7 +13,7 @@
 			>
 				<li
 					v-for="(option, index) in options"
-					:key="index"
+					:key="option.value"
 					:data-disabled="disabled"
 				>
 					<input

panel/src/components/Forms/Layouts/LayoutSelector.vue

@@ -14,8 +14,8 @@
 			class="k-layout-selector-options"
 		>
 			<button
-				v-for="(columns, layoutIndex) in layouts"
-				:key="layoutIndex"
+				v-for="columns in layouts"
+				:key="columns.join(',')"
 				:aria-current="value === columns"
 				:aria-label="columns.join(',')"
 				:value="columns"
@@ -24,8 +24,8 @@
 			>
 				<k-grid aria-hidden>
 					<k-column
-						v-for="(column, columnIndex) in columns"
-						:key="columnIndex"
+						v-for="(column, index) in columns"
+						:key="index"
 						:width="column"
 					/>
 				</k-grid>

panel/src/components/Forms/Toolbar/TextareaToolbar.vue

@@ -154,6 +154,7 @@ export default {
 					layout.push("|");
 				} else if (available[button]) {
 					const command = {
+						id: button,
 						...available[button],
 						click: () => {
 							available[button].click?.call(this);

panel/src/components/Forms/Toolbar/Toolbar.vue

@@ -1,11 +1,11 @@
 <template>
 	<nav class="k-toolbar" :data-theme="theme">
 		<template v-for="(button, index) in buttons">
-			<hr v-if="button === '|'" :key="index" />
+			<hr v-if="button === '|'" :key="'separator-' + index" />
 
 			<k-button
 				v-else-if="button.when ?? true"
-				:key="index"
+				:key="button.id ?? index"
 				:current="button.current"
 				:disabled="button.disabled"
 				:icon="button.icon"

panel/src/components/Forms/Writer/Toolbar.vue

@@ -108,6 +108,7 @@ export default {
 				}
 
 				buttons.push({
+					id: "nodes",
 					current: Boolean(this.activeNode),
 					icon: this.activeNode.icon ?? "title",
 					dropdown: nodes
@@ -130,6 +131,7 @@ export default {
 					}
 
 					buttons.push({
+						id: markType,
 						current: this.editor.activeMarks.includes(markType),
 						icon: mark.icon,
 						label: mark.label,

panel/src/components/Lab/Docs/Examples.vue

@@ -4,9 +4,9 @@
 		class="k-lab-docs-section k-lab-docs-examples"
 	>
 		<k-headline class="h3">Examples</k-headline>
-		<k-code v-for="(example, index) in examples" :key="index" language="html">{{
-			example.content
-		}}</k-code>
+		<k-code v-for="(example, index) in examples" :key="index" language="html">
+			{{ example.content }}
+		</k-code>
 	</section>
 </template>
 

panel/src/components/Layout/Table.vue

@@ -70,7 +70,7 @@
 				<template v-else>
 					<tr
 						v-for="(row, rowIndex) in values"
-						:key="row.id ?? row._id ?? row.value ?? JSON.stringify(row)"
+						:key="row.id ?? row._id ?? row.value ?? rowIndex"
 					>
 						<!-- Index & drag handle -->
 						<td

panel/src/components/Navigation/ButtonGroup.vue

@@ -3,8 +3,8 @@
 		<slot v-if="$slots.default" />
 		<template v-else>
 			<k-button
-				v-for="(button, index) in buttons"
-				:key="index"
+				v-for="button in buttons"
+				:key="JSON.stringify(button)"
 				v-bind="{
 					variant,
 					theme,

panel/src/components/Navigation/Tree.vue

@@ -4,8 +4,8 @@
 		:style="{ '--tree-level': level, ...$attrs.style }"
 	>
 		<li
-			v-for="(item, index) in state"
-			:key="index"
+			v-for="item in state"
+			:key="item.id ?? $helper.uid()"
 			:aria-expanded="item.open"
 			:aria-current="item.value === current"
 		>

panel/src/components/Sections/Sections.vue

@@ -7,25 +7,17 @@
 	/>
 	<k-grid v-else class="k-sections" variant="columns">
 		<k-column
-			v-for="(column, columnIndex) in tab.columns"
-			:key="parent + '-column-' + columnIndex"
+			v-for="column in tab.columns"
+			:key="JSON.stringify(column)"
 			:width="column.width"
 			:sticky="column.sticky"
 		>
-			<template v-for="(section, sectionIndex) in column.sections">
+			<template v-for="section in column.sections">
 				<template v-if="isVisible(section)">
 					<component
 						:is="'k-' + section.type + '-section'"
 						v-if="exists(section.type)"
-						:key="
-							parent +
-							'-column-' +
-							columnIndex +
-							'-section-' +
-							sectionIndex +
-							'-' +
-							blueprint
-						"
+						:key="(section.id ?? JSON.stringify(section)) + '-' + blueprint"
 						v-bind="section"
 						:column="column.width"
 						:lock="lock"
@@ -37,9 +29,7 @@
 					/>
 					<template v-else>
 						<k-box
-							:key="
-								parent + '-column-' + columnIndex + '-section-' + sectionIndex
-							"
+							:key="section.id ?? $helper.uid()"
 							:text="$t('error.section.type.invalid', { type: section.type })"
 							icon="alert"
 							theme="negative"

panel/src/helpers/index.js

@@ -15,6 +15,7 @@ import page from "./page.js";
 import ratio from "./ratio.js";
 import sort from "./sort.js";
 import string from "./string.js";
+import uid from "./uid.js";
 import upload from "./upload.js";
 import url from "./url.js";
 
@@ -43,6 +44,7 @@ export default {
 			slug: string.slug,
 			sort,
 			string,
+			uid,
 			upload,
 			url,
 			uuid: string.uuid

panel/src/helpers/uid.js

@@ -0,0 +1,5 @@
+let id = 0;
+
+export default function () {
+	return String(id++);
+}