2

我必须在我的 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

4

1 回答 1

1

该问题是由于列表对象在更改时重新计算并且您最终得到初始对象这一事实引起的，因为用于生成它的数据（列和项目）没有更改。

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

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

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

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

于 2020-05-10T15:26:19.913 回答