Vue Draggable - 拖放后动态更改组件

Question

我有两个独立的拖动区域，当我将组件从一个区域拖动到另一个区域时，如何根据组件被拖动到的区域动态更改组件的状态？

目前，我正在从序列化器渲染状态，但我想在拖放后动态更改它。

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

Answer 1

该draggable组件发出一个更改事件：

change当 list prop 不为 null 并且相应的数组由于拖放操作而改变时，会触发该事件。

传递给事件的参数有一个名为的属性added，其中包含添加到数组中的元素的信息。

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

示例：您将一个元素从已发布的组拖放到未发布的组中。

模板：

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

脚本：

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