如何使用 vuedraggable 处理数组的数组

Question

我在 vuejs 实验中遇到了问题。

我的数据中有两个数组，例如：

columns: [
    { name: "col1" },
    { name: "col2" },
    { name: "col3" },
    { name: "col4" }
  ],
  items: [
    {
      name: "col1-i1",
      id: 1241,
      column: "col1"
    },
    {
      name: "col1-i2",
      id: 1241242,
      column: "col1"
    },
    {
      name: "col2-i1",
      id: 1242421,
      column: "col2"
    }
  ]

然后我构建包含这两个数组的对象：

computed: {
list() {
  return this.columns.map(col => {
    return {
      column: col,
      items: this.items.filter(item => item.column === col.name)
    };
  });
}
},

在此之后，在我的列表对象中我有这样的结构：

[{
"column": {
  "name": "col1"
},
"items": [
  {
    "name": "col1-i1",
    "id": 1241,
    "column": "col1"
  },
  {
    "name": "col1-i2",
    "id": 1241242,
    "column": "col1"
  }
]},{
"column": {
  "name": "col2"
},
"items": [
  {
    "name": "col2-i1",
    "id": 1242421,
    "column": "col2"
  }
]},{
"column": {
  "name": "col3"
},
"items": []},{
"column": {
  "name": "col4"
},
"items": []}]

我尝试在 4 列中制作可拖动的项目，所以：

<div class="column" v-for="(column, index) in list" :key="index">
  {{column.column.name}}
  <draggable group="a" :list="column.items">
    <div class="item" v-for="item in column.items" :key="item.id">{{item.name}}</div>
  </draggable>
</div>
</div>

但它没有被拖到其他列中。

如何让它向右移动。

示例在这里https://codesandbox.io/s/elated-aryabhata-uslwb?fontsize=14&hidenavigation=1&theme=dark

Answer 1

此问题是由于列表对象在更改时重新计算而您最终得到初始对象，因为用于生成它的数据（列和项）没有更改。

计算属性默认只有 getter，而且它们只有 return 计算值。如果要设置计算值，则必须定义一个 setter，并更改列和项目的初始值。

但是，对于这个用例，您应该在 mounted 钩子中生成列表对象，然后将其提供给可拖动组件。

data: () => ({
  list: [],
  columns: [...], // your columns
  items: [...] // your items
})
mounted(){
  this.list = this.columns.map(col => {
    return {
      column: col,
      items: this.items.filter(item => item.column === col.name)
    };
  });
}

如果您计划动态更新列和项目，那么您应该为这些属性定义一个观察器，并重新计算列表。

如何使用 vuedraggable 处理数组的数组

How to work with arrays of arrays with vuedraggable

vue.js

vuedraggable