Vue JS, Drag n drop, and Get Ids - vue.js

Question

I manage differents teams, and a single column of competitors.
With vue-dragula, I can drag n' drop competitors to the team I want, this is working fine.
Now, I need to detect which competitors is added to which team and modify the myTeam variable each drag and drop.
I wrote a fiddle here:
https://jsfiddle.net/xoco70/vzk27smw/9/
I removed the events because they won't work in fiddle, but they are like:
Vue.vueDragula.eventBus.$on(
'drop',
function (args) {
...
}
);
Vue.vueDragula.eventBus.$on(
'dropModel',
function (args) {
...
}
)
How should I get teams Id, and competitor Id that I moved, so I can persist asignations ???

Answer 1

Here is my Fiddle: https://jsfiddle.net/kanlidy/tsofafzq/4/
In your HTML template panel-body part:
<div class="panel-body">
<div class="container-dragula"
v-dragula="copyOne"
:team-id="team.id"
bag="third-bag">
<div v-cloak
v-for="(competitor, index) in copyOne"
:team-id="team.id"
:id="compotitor.id"
:index="index"
:key="competitor.id"
>{{competitor.name}}
</div>
</div>
</div>
In your wrapper-dragula part: :competitor="competitor" to :id="competitor.id"
<div class="wrapper-dragula">
<div class="container-dragula" v-dragula="competitorsArea"
bag="third-bag">
<div v-cloak
v-for="(competitor, index) in competitorsArea"
:id="competitor.id"
:index="index"
:key="competitor.id"
>{{competitor.name}}
</div>
</div>
</div>
In your JS:
created: function () {
Vue.vueDragula.eventBus.$on('drop', function (args) {
alert('teams ID is:'+args[1].parentNode.getAttribute("team-id"));
alert('competitors ID is: ' + args[1].getAttribute("id"));
})
}
Hope helps.