Vue on event selects first value only

Question

I am using vue-draggable to drag my items. I am trying to print out the moved id using :move="onDrop" event and it prints out using console.log(this.teamByTime2[0].id); first value only. Lets take an example from my DATA, there is person called KIM CHAN, if i drag Kim then its suppose to print "5" not "4". Is there a way to solve that?

View

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

Method

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

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" }]
      }
    ]
  })

Here is my code below on CODE SANDBOX

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

score 0 · Answer 1 · answered Jun 02 '20 at 17:02

0

:move="onDrop" is the short-form for v-bind:move="onDrop" which binds attribute move to a prop inside of the draggable component, or incase it doesnt exist as a prop inside of draggable it gets passed on to the root component that is the direct child of the <template> tag inside of draggable.

If you want to listen to the move event, you need to use the v-on directive, or its short form @move="onDrop"

answered Jun 02 '20 at 17:02

Tom

134
7

I am already using @move="onDrop" event but it only prints out the first value, that's my error. – Yahoo Jun 02 '20 at 17:11
okay, could you maybe share the code of where you emit the move event? – Tom Jun 02 '20 at 17:15
so i assume you are using this [library](https://github.com/SortableJS/Vue.Draggable) i cannot find a `move` event only a `moved` event. that one emits with 3 parameters, maybe you were looking for that? – Tom Jun 02 '20 at 17:23
If i use @start="drag=true" instead of :move="OnDrop' it will print out the value as "4" on console.log(this.teamByTime2[0].id); . If Kim Chan is dragged its suppose to print "5" as an id not "4". – Yahoo Jun 02 '20 at 18:15

Vue on event selects first value only

1 Answers1