Vue on 事件仅选择第一个值

Question

我正在使用vue-draggable来拖动我的项目。我正在尝试使用:move="onDrop"事件打印出移动的 id，它仅使用第一个值打印console.log(this.teamByTime2[0].id);它。让我们从我的DATA中举一个例子，有一个叫KIM CHAN的人，如果我拖着 Kim，那么它应该打印"5"而不是"4"。有没有办法解决这个问题？

视图

<div id="app">
<draggable :list="dataList3" class="list-group" draggable=".item" group="a">
<div
class="list-group-item item"
v-for="element in dataList3"
:key="element.name"
>{{ element.last_name }}</div>
</draggable>
<br>
<div v-for="reservation in teamByTime2" v-bind:key="reservation.id">
<draggable
:list="reservation.Reservation_people"
class="list-group"
draggable=".item"
group="a"
:move="onDrop" <!-- I am using move event here -->
>
<div
class="list-group-item item"
v-for="element in reservation.Reservation_people"
:key="element.id"
>{{ element.last_name }}</div>
</draggable>
</div>
</div>

方法

onDrop(e) {
console.log("moving teamByTime");
console.log(this.teamByTime2[0].id); <!-- this only prints out first value -->
<!-- is there a way to get the id actual moving/dragging item ? 
If I am moving Kim Chan from teamByTime, then the id is suppose to be 5 not 4 -->
}

数据

data: () => ({
selectedid: "",
dataList3: [
{ id: "1", first_name: "Jay", last_name: "Leo" },
{ id: "2", first_name: "David", last_name: "Reu" },
{ id: "3", first_name: "John", last_name: "Jac" }
],
teamByTime2: [
{
id: "4",
Reservation_people: [{ id: "18", first_name: "San", last_name: "lee" }]
},
{
id: "5",
Reservation_people: [{ id: "19", first_name: "Kim", last_name: "Chan" }]
},
{
id: "6",
Reservation_people: [{ id: "20", first_name: "Sun", last_name: "leo" }]
}
]
})

这是我下面关于CODE SANDBOX的代码

https://codesandbox.io/s/serene-wildflower-sh4sk?file=/src/App.vue:874-1476

Answer 1

:move="onDrop"是v-bind:move="onDrop"的缩写形式，它将属性move绑定到draggable组件内部的 prop，或者如果它不作为 prop 存在于draggable内部，它会传递给根组件，该根组件是draggable内<template>标签的直接子级。

如果要侦听move事件，则需要使用v-on指令或其缩写形式@move="onDrop"