I am working with an array of objects
const array = [
{
id: uniqueId,
childs: [
{
id: uniqueId
}
]
},
{
id: uniqueId,
childs: [
{
id: uniqueId
}
]
},
]
and I have a looping structure in place
<template v-for="(item, index_item) in array" :key="item.id">
<div>
<template v-for="(child, index_child) in item.childs" :key="child.id">
<button type="button" @click.prevent="addChild(index_item, index_child)"></button>
<FileUploader></FileUploader>
<button type="button" @click.prevent="addChild(index_item, index_child + 1)"></button>
</template>
</div>
</template>
and I am using the addChild method as follows
const addChild = (index_item, index_child) => {
array[index_item].childs.splice(index_child, 0, {id : uniqueId}
}
When adding a child to the end of the array, everything works fine. However, if the indexes change, the file inputs inside FileUploader components get reset. I've tried different methods like setting a unique key for FileUploader, but no luck.
I need assistance on how to re-index the array without resetting my components
Any advice would be greatly appreciated.