Cannot drag: TransitionGroup children must be keyed

[Extarys]

I looked at the code, but I'm not sure why no examples refer to id'ing specific bar inside rows. What is the best way to fix this?

packages.json version: "@infectoone/vue-ganttastic": "^2.0.2",

Warning message:

[Vue warn]: <TransitionGroup> children must be keyed. 
  at <TransitionGroup name="bar-transition" tag="div" > 
  at <GGanttRow key=1 label="Kevin" bars= 
Array [ {…} ]
  ... > 
  at <GGanttChart chart-start="2022-02-28 05:00" chart-end="2022-02-28 22:00" precision="hour"  ... > 

Template:

<template>
	<g-gantt-chart
		:chart-start="ganttStart"
		:chart-end="ganttEnd"
		precision="hour"
		:highlighted-hours="true"
		bar-start="myStart"
		bar-end="myEnd"
		@dragend-bar="onDragendBar($event)"
	>
		<g-gantt-row
			v-for="row in ganttRows.values"
			:key="row.id"
			:label="row.label"
			:bars="row.barList"
			:highlight-on-hover="true"
		>
			<template #bar-label="{ bar }">
				<span>{{ bar.label }}</span>
			</template>
		</g-gantt-row>
	</g-gantt-chart>
</template>

Script:

<script setup>
const pplStatic = [
	{ id: 1, name: "Kevin" },
	{ id: 2, name: "Jonny" },
]

function onDragendBar(ev){
	console.info(ev)
}

const ganttStart = ref("2022-02-28 05:00");
const ganttEnd = ref("2022-02-28 22:00");
const ganttRows = reactive(
	{
		values: [
		]
	}
)
// Testing
function GanttAddBlankEmp() {

	pplStatic.forEach(element => {
		ganttRows.values.push({
				id: element.id,
				label: element.name,
				barList: [
					{
						myStart: "2022-02-28 09:00",
						myEnd: "2022-02-28 18:00",
						// image: "vue_ganttastic_logo_no_text.png",
						label: "",
						ganttBarConfig: { color: "white", backgroundColor: "#de3b26", bundle: "redBundle" }
					}
				]
			})
	});
}
GanttAddBlankEmp()
</script>

[zunnzunn]

ganttBarConfig: { color: "white", backgroundColor: "#de3b26", bundle: "redBundle" } It appears that an id property is missing here. Take a look at the following page in the docs. TLDR: just add a unique id to the ganttBarConfig for each bar.

[Extarys]

OH thanks ! I just copied the demo code :thinking: But I never saw that website so I'm confused, maybe I used another fork's webpage as documentation, which could explain all the confusion I had trying it out :joy:

Thanks @InfectoOne !

[Extarys]

May I suggest a simple Math.random to generate IDs if none is provided?