Vue Draggable - динамически менять компонент после перетаскивания - PullRequest
Новая
       7

Vue Draggable - динамически менять компонент после перетаскивания

1 голос
/ 21 мая 2019

У меня есть две отдельные dragAreas, и когда я перетаскиваю компоненты из одной области в другую, как я могу динамически изменять состояние моего компонента на основе области, в которую он был перетащен?

В настоящее время я выполняю рендерингстатус из сериализатора, но я хочу изменить его динамически после перетаскивания. 

<draggable
  class="dragArea published"
  :options="{ group: { name: 'g1', put: 'g1'}, animation: 120 }"
  @end="onEnd">
    <div
      v-for="lesson in classroomLessonsPublished"
      :class="`lesson-card ${lesson.id}`"
      data-status="published">   
        <div> 
          {{ lesson.status }}
        </div>
    </div>
</draggable>

<draggable
  class="dragArea unpublished"
  :options="{ group: { name: 'g1', put: 'g1'}, animation: 120 }"
  @end="onEnd">
    <div
      v-for="lesson in classroomLessonsUnpublished"
      :class="`lesson-card ${lesson.id}`"
      data-status="unpublished">   
        <div> 
          {{ lesson.status }}
        </div>
   </div>
</draggable>

1 Ответ

0 голосов
/ 21 мая 2019

Компонент draggable генерирует событие change :

change событие запускается, когда свойство списка не равно нулю, и соответствующий массив изменяется из-за перетаскивания.Операция and-drop.

Аргумент, передаваемый событию, имеет свойство added, которое содержит информацию об элементе, добавленном в массив. 

{
  newIndex: number, // the index of the added element
  element: T // the added element,
}

Пример. Вы перетащите элемент из опубликованной группы в неопубликованную группу.

template: 

<draggable
  class="dragArea unpublished"
  :options="{ group: { name: 'g1', put: 'g1'}, animation: 120 }"
  @change="onUnpublishedChange"
  @end="onEnd"
>
  <!-- ... -->
</draggable>

script: 

 methods: {
    onUnpublishedChange({ added }) {
      if (added) {
        added.element.status= false // Not published
      }
    },
  }

Ваши группыиметь такое же имя, вы, вероятно, должны изменить его на:

Опубликовано: 

:options="{ group: { name: 'published', put: 'unpublished'}, animation: 120 }"

Неопубликовано: 

:options="{ group: { name: 'unpublished', put: 'published'}, animation: 120 }"
...