How to match data organized as array to configuration settings (Vue draggable related)

Question

I have a special issue related to vue draggable, which also could be seen as a general question, having to do with the data structure (array) . (example: vue-draggable-test)

Vue draggable is used to reorder array elements - so you have to work with an array.

In my app, you can add/remove items to each group , and you can reorder the groups.

Currently my data structure is an array consisting of of arrays of items (objects), each array belonging to a certain group.

dataGroups: [
    [ 
        {
            groupName: 'firstGroup',
            textContent: 'Hello this is an item for first group.'
        },
        {
            groupName: 'firstGroup',
            textContent: 'Another item for first group'
        }
    ], 
]

Each group has certain settings, for instance a "max number of items" (or numElements), stored in a separate configuration object:

 datagroupsConfig: [
     {
      name: 'firstGroup',
       numElements: 3
    },
   {
      name: 'otherGroup',
       numElements: 1
    },

The problem is when looping the groups and items, how can I keep track of which group it belongs to? (since it's an array)?

Previously (before using vue draggable), I used an object:

{
  mygroup: [ {},{},]
}

which could be matched with the config object.

But if the groups and items are organized into arrays, there is no indication of what group they belong to (except any existing items have "groupName" property which can be checked).

Initially the data groups may be empty, so they have no identification. The number of initial data groups should be determined by the configuration object.

I did an example to show this problem: vue-draggable-test

Here is just to demonstrate how it is looped (from my example):

<draggable v-model="form.dataGroups" 
    @start="drag=true" 
    @end="drag=false"  
    ghost-class="ghost" 
    class="row"
>
    <div v-for="(boxGroup, idx) in form.dataGroups" 
        :key="`group_${idx}`" 
        class="drag-element flex-center"
        style="display:flex"
    >
        <!-- add item to the current datagroup - but check the config if it is allowed -->
        <a v-if="doSomeCheck"   
            @click="openAddItemWindow(idx)" 
            class="btn btn2"  
            v-cloak>Add new item
        </a>

        <div v-for="(item, idx) in boxGroup" 
            :key="`item_${idx}`"
            class="boxgroup-item"
        >
            <p class="font-sm" >{{item.textContent }}</p>
            <p>{{boxGroup.textContent}}</p>
        </div>
    </div>

</draggable>

So how could I change the data structure or make some other change to solve this problem while still keeping the dragging/reordering functionality. Are there any conventional solutions that I have missed?

Answer 1

I realized I could make a more nested structure, using an object with two properties: "properties" (with the config properties) and "datagroup" (array of items).

I changed the exampel which works: working example.

dataGroups : [
    { 
        properties: { 
            name:"firstGroup",
            numElements:3
        },
        dataGroup: [
          {
            groupName:"firstGroup",
            textContent:"Hello this is an item for first group."
          },
          {
            groupName:"firstGroup",
            textContent:"Another item for first group"
          }
        ]
    },
    { 
      properties: { 
           name:"secondGroup",
           numElements:1
      },
      dataGroup: [
          {
            groupName:"secondGroup",
            textContent:"This is an item for second group"
          }
      ]
   }
]

And that seems to be a way to solve it..