My array, reducedGroups, has been restructured in response to Java's comment below. It is now an Array of Objects with varying numbers of objects inside.
It may have a structure like this:
[
{ "0": { "value": "ccc" }, "1": { "value": "aaa" }, "2": { "value": "ddd" }, "3": { "value": "bbb" } },
{ "0": { "value": "eeee" } },
{ "0": { "value": "fff" } },
{ "0": { "value": "ggg" } }
]
The following code organizes the internal arrays into groups and displays a Vuetify Text Field above for user to name each group.
<div v-for="(group, index) in reducedGroups" :key="index">
<v-flex>
<v-text-field label="Group Name" />
<div
v-for="item in group"
:key="item.value"
>{{ item.value}}</div>
<div>
<v-btn icon color="error" @click="removeGroup(index)">
<v-icon>mdi-trash-can</v-icon>
</v-btn>
</div>
</v-flex>
</div>
The resulting output can be seen below.
https://i.sstatic.net/PvenL.png
I have 2 questions:
1) How do I determine when the user has named each group so that the trash cans can appear on screen?
2) How can I access the names given by the user for the remaining groups once irrelevant ones are removed and only 3 groups remain? I want to display these remaining group names on the screen.
UPDATE: Data restructuring done in response to Java's feedback.