如何将组织为数组的数据与配置设置相匹配（Vue 可拖动相关）

Question

我有一个与 vue draggable 有关的特殊问题，这也可以看作是一个一般性问题，与数据结构（数组）有关。（示例：vue-draggable-test）

Vue draggable 用于重新排序数组元素 - 所以你必须使用数组。

在我的应用程序中，您可以 add/remove 项目到每个组，并且您可以重新排序组。

目前我的数据结构是由项目（对象）数组组成的数组，每个数组属于某个组。

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

每个组都有特定的设置，例如“最大项目数”（或 numElements），存储在单独的配置对象中：

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

问题是在循环组和项目时，如何跟踪它属于哪个组？（因为它是一个数组）?

之前（在使用vue draggable之前），我使用了一个对象：

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

可以与配置对象匹配。

但是如果组和项目被组织成数组，则没有指示它们属于哪个组（除非任何现有项目具有可以检查的“groupName”属性）。

最初数据组可能是空的，所以它们没有标识。初始数据组个数由配置对象决定。

我做了一个例子来说明这个问题：vue-draggable-test

这里只是为了演示它是如何循环的（来自我的例子）：

<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>

那么我该如何改变数据结构或做一些其他改变来解决这个问题同时仍保留 dragging/reordering 功能。有没有我遗漏的常规解决方案？

Answer 1

Javascript 数组是对象，因此您可以为每个数据组定义属性。

const datagroup1 = [];
datagroup1.numElements = 3;

const datagroup2 = [];
datagroup2.numElements = 4;

const dataGroups: [
    datagroup1,
    datagroup2, 
];

Answer 2

我意识到我可以创建一个更嵌套的结构，使用具有两个属性的对象：“属性”（具有配置属性）和“数据组”（项目数组）。

我更改了有效的示例：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"
          }
      ]
   }
]

这似乎是解决问题的方法..

如何将组织为数组的数据与配置设置相匹配（Vue 可拖动相关）

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

data-structures

sortablejs

vuejs2

vuedraggable