Question

I have two lists (using cue-draggable), one source list and one configuration (sorted) list. When dropping item from source list onto configuration list I'd like to transform data before it is added to configuration list.

I am currently using the onChange event as I want access to actual JSON item where I use JS splice function to remove the already added item and then I transform data and insert into configuration list. This works but I'd prefer to transform data before any insertion into destination list.

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

Answer 1

通过阅读SortableJs和vue.draggable文档和代码，无法做到这一点。一种解决方法（hack？）是对“ stages”数组使用计算属性，然后使用v模型而不是“ list” prop将其传递给可拖动属性。这告诉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);
  }
}

与此有关的问题显然是空的/虚拟的二传手。感觉是错误的，但不应该是大问题。您还可以在该设置器中做大量工作，找出当前配方阶段与传入的任何可拖动对象之间的区别。您无需为onChange事件烦恼。

hook before onAdd/onChange event adds dropped item to list

1 个答案: