0

我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

4

1 回答 1

0

:move="onDrop"v-bind:move="onDrop"是将属性绑定move到组件内部的 prop的缩写形式，或者如果它不存在，因为它内部draggable的 propdraggable被传递到根组件，即.<template>draggable

如果你想监听move事件，你需要使用v-on指令，或者它的简写形式@move="onDrop"

于 2020-06-02T17:02:01.960 回答