0

我有一个与 相关的特殊问题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>

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

4

2 回答 2

0

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

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

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

const dataGroups: [
    datagroup1,
    datagroup2, 
];
于 2021-02-18T14:56:02.963 回答
0

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

我更改了有效的示例：工作示例。

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"
          }
      ]
   }
]

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

于 2021-02-19T23:27:09.603 回答