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

Posted 2023-02-22

【中文标题】Draggable vue - 如何访问“列”ID？

【英文标题】：Draggable vue - how to access "column" 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) ?

【参考方案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