0

我有两个列表（使用 cue-draggable），一个源列表和一个配置（排序）列表。将项目从源列表拖放到配置列表时，我想在将数据添加到配置列表之前对其进行转换。

我目前正在使用 onChange 事件，因为我想访问实际的 JSON 项目，我使用 JS 拼接函数删除已添加的项目，然后转换数据并插入到配置列表中。这可行，但我更愿意在任何插入目标列表之前转换数据。

onChange (evt) {
  if (evt.hasOwnProperty('added')) {
    var addedIndex = evt.added.newIndex
    if (addedIndex !== null) {
      var itemsToAdd = transform(evt.added.element)

      //remove new item inserted before receiving onChange
      this.recipe.stages.splice(addedIndex, 1)
      //Add transformed data
      this.recipe.stages.splice(addedIndex, 0, ...itemsToAdd)
    }
  }
}
4

1 回答 1

0

通过阅读 SortableJs 和 vue.draggable 文档和代码，没有办法做到这一点。一种解决方法（hack？）是为您的“阶段”数组使用计算属性，并使用 v-model 而不是“列表”道具将其传递给可拖动。这告诉 draggable 列表是不可变的。因此，每当它进行更改时，它都会为您提供一个全新的列表。你可以利用这一点。要么在 setter 中进行替换工作，要么编写一个 noop/dummy setter 并在引发更改事件后稍后进行替换工作。

<draggable v-model="recipeStages" @change="onChange">
     ....
</draggable>


computed: {
    recipeStages: {
       get: function() { return this.recipe.stages;}
       set: function(value) {} //empty setter approach
    }
}

因此，当交互结束并且可拖动调用“onChange”时，您可以执行以下操作：

onChange (evt) {
  if (evt.hasOwnProperty('added')) {
      var addedIndex = evt.added.newIndex;
      var transformed = transform(evt.added.element);
      this.recipe.stages.splice(addedIndex,0,transformed);
  }
}

这个问题显然是空/虚拟设置器。感觉不对，但应该没什么大不了的。您还可以在该 setter 中做大量工作，并找出当前配方阶段与传入的任何可拖动对象之间的区别。您无需为 onChange 事件而烦恼。

于 2020-02-27T01:58:32.730 回答