Draggable vue - 如何访问“列”ID？答案

【问题标题】：Draggable vue - how to access "column" id?Draggable vue - 如何访问“列”ID？
【发布时间】：2019-03-01 13:21:32
【问题描述】：

现在我尝试使用可拖动来构建看板（有四列）。我开始创建两列来了解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 的更改事件？
或者如何正确/更好地获取已编辑项目的新列？

【问题讨论】：

更改事件只接受一个参数，因此您必须使用 newIndex 和/或 oldIndex（请参阅here）
@LShapz 类似的东西：@change="seeChange(newIndex = 1) ?

标签： vue.js vuejs2 drag-and-drop dom-events draggable

【解决方案1】：

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

模板

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

组件

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

参考：Passing event and argument to v-on in Vue.js

【讨论】：