可拖动的 vue - 如何访问 "column" id？

Question

现在我正在尝试使用 draggable 来构建看板（有四列）。我开始创建两个专栏来了解 vue-draggable，但我不知道如何访问任务栏。

我的前两栏：

<draggable v-model="myArray" class="simple-a" 
  :options="{group:'people'}" :move="onMove" 
  @start="changeDrag" @end="changeDrag" 
  @change="seeChange">
  <div v-for="(element, aIndex) in myArray" :key="aIndex" class="element-a">
      {{ element.name }}
    </div>
</draggable>

<draggable v-model="myArray2" class="simple-a" style="background:red;" 
  :options="{group:'people'}" :move="onMove" @start="changeDrag" 
  @end="changeDrag" @change="seeChange(1)">
  <div v-for="(element2, aIndex) in myArray2" :key="aIndex" class="element-a">
    {{ element2.name }}
  </div>
</draggable>

我正在使用 seeChange 函数来获取更改的元素：

seeChange({moved, added, removed}, col) {
  if(added){
    console.log(added);
    console.log('column: '+col);
  }
  if(moved){
    console.log(moved);
  }
  if(removed){
    console.log(removed);
  }
}

如您所见，我正在尝试将 col 属性传递给此函数（更改事件），但我做不到，总是 undefined。

如何将属性传递给 vue draggable 的更改事件？
或者correct/better如何获取编辑项的新列？

Answer 1

将附加参数传递给事件处理程序所需的语法是

模板

<draggable ... @change="seeChange($event, 1)">
  ...
</draggable>

分量

methods: {
  seeChange(event, col) {
    console.log(event, col)
    ...
  }
},

参考：

可拖动的 vue - 如何访问 "column" id？

Draggable vue - how to access "column" id?

drag-and-drop

draggable

dom-events

vue.js

vuejs2