如何使用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)
    };
  });
}
},

在此之后，在我的list对象中，我有这个结构：

[{
"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，并且它们仅返回计算值。如果要设置计算值，则必须定义设置器，并更改列和项的初始值。

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

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)
    };
  });
}

如果您计划动态更新列和项，则应该为这些属性定义一个监视器，并重新计算列表。