Draggable vue - how to access "column" id?

Question

Right now I trying to use draggable to build a kanban (with four columns). I started creating two columns to learn about vue-draggable, but I can't figure out how to access the column of task.

My first two columns:

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

I am using seeChange function to get which element has changed:

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

As you can see I'm trying to pass col attribute to this function (change event), but I can't, is always undefined.

How can I pass an attribute to a change event of vue draggable ?
Or how is the correct/better way to get the new column of a edited item?

the change event only accepts the one argument so you'll have to use the newIndex and/or oldIndex (see [here](https://github.com/SortableJS/Vue.Draggable#events)) — LShapz, Sep 25 '18 at 20:43
@LShapz something like that: `@change="seeChange(newIndex = 1)` ? — Lucas Andrade, Sep 25 '18 at 20:50

score 3 · Accepted Answer · answered Sep 25 '18 at 21:22

The syntax you need to pass additional parameters to an event handler is

template

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

component

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

Ref: Passing event and argument to v-on in Vue.js

Draggable vue - how to access "column" id?

1 Answers1