Question

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

我的前两列：

driverinfo

我正在使用<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

如您所见，我正在尝试将col属性传递给该函数（更改事件），但我不能总是seeChange({moved, added, removed}, col) { if(added){ console.log(added); console.log('column: '+col); } if(moved){ console.log(moved); } if(removed){ console.log(removed); } }。

如何将属性传递给可拖动的vue的更改事件？
还是正确/更好的方式来获取已编辑项目的新列？

Answer 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

可拖动的Vue-如何访问“列” ID？

1 个答案: