Vue.js 如何使用具有vuedraggable的阵列阵列

在我的vuejs实验中，我不得不面对这个问题 我的数据中有两个数组 f、 e

然后我构建由这两个数组组成的对象，以便：

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>

{{column.column.name}
{{item.name}

但它并没有被拖进其他的柱子

如何使它正确运行

---

exmaple在此

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

默认情况下，计算属性仅为getter，并且它们仅返回计算值。如果要设置计算值，则必须定义一个setter，并更改列和项的初始值

但是，对于这个用例，您应该在mountedhook中生成list对象，然后将其提供给draggable组件

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

---

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

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

默认情况下，计算属性仅为getter，并且它们仅返回计算值。如果要设置计算值，则必须定义一个setter，并更改列和项的初始值

但是，对于这个用例，您应该在mountedhook中生成list对象，然后将其提供给draggable组件

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

---

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

是的，它几乎可以工作，但我有一个小问题，我的数据（列和项）从vuex

计算：{…mapGetters（{columns:'columns'，items:'items'}）}，

所以在mounted中，我在列和项中没有数据，除了mounted方法中的setTimeout还有什么解决方案吗，但是我有一个lil问题，我的数据（列和项）从vuex

计算：{…mapGetters（{columns:'columns'，items:'items'}）}，

所以在mounted中，我在列和项中没有数据，除了mounted方法中的setTimeout之外，还有什么解决方案吗