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

问题描述

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

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

在我的应用中，您可以向每个组添加/删除项目，并且可以重新排列组。

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

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>

那么我该如何更改数据结构或进行其他更改来解决此问题同时仍然保持拖动/重新排序功能。有没有我遗漏的传统解决方案？

解决方法

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

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

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

const dataGroups: [
    datagroup1,datagroup2,];

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

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

这似乎是一种解决方法..

data-structures sortablejs vuedraggable