[Vuejs]-Vue-drag-drop: context on target of drop event

Maybe I missed something, but wouldn’t this in handleDrop() be the component that was dropped onto? That’s how it is for other event handlers in Vue.

See here for an example:

<div id="example-2">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'

Update

The above is true, but you want to know which day is that drop component. To achieve that, pass it as a prop to the child drop component like so:

Vue.component('drop', {
  props: ['day'],
  // ...
})

<ul>
    <li v-for="day in days">
        <drop @drop="handleDrop" ref="day" :day="day"></drop>
    </li>
</ul>

The :day="day" is the key. Then, in handleDrop(), this.day will be the day

I figured out I need to pass the data myself. One way to do this is to wrap the function vue-drag-drop provides.

<ul>
    <li v-for="day in days">
        <drop @drop="function(data, event) { handleDrop(data, day, event); }" ref="day"></drop>
    </li>
</ul>

That seems to work as expected, but I’m wondering if there’s another way to do it like using a library attribute (similar to ref).