Перехватывает перед тем, как событие onAdd/onChange добавляет упавший элемент в список

Question

У меня есть два списка (используя 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)
    }
  }
}

Answer 1

Прочитав документацию и код SortableJs и vue.draggable, сделать это невозможно. Обходной путь (взлом?) - использовать вычисляемое свойство для вашего массива "стадий" и передать его в перетаскиваемый объект с помощью v-модели вместо свойства "список". Это сообщает draggable, что список неизменяем. Таким образом, он будет давать вам новый список всякий раз, когда вносит изменения. Вы можете воспользоваться этим. Либо выполните работу по замене в установщике, либо напишите установщик noop /dummy и выполните работу по замене позже, когда возникнет событие изменения.

<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.