Question

这可能是一个非常幼稚的问题，它不是关于vue-drag-drop的，而是关于vuejs的，我是新来的。

如果我有两个清单：

<ul>
    <li v-for="thing in thing">
        <drag :transfer-data="{ thing }">
            <span>{{ thing.title }}</span>
        </drag>
    </li>    
</ul>

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

在 handleDrop（）方法中，我可以看到事件，其中包括拖动到列表项中的内容，但是我看不到数组中哪个项目有任何上下文被拖动的东西被拖入。我尝试在 drop 元素上使用 ref ，但这似乎并不是我想要的。

我怎么知道该物品被拖到哪一天？

Answer 1

也许我错过了一些东西，但是this中的handleDrop()不会成为放置的组件吗？这就是Vue中其他事件处理程序的方式。

请参见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!'

更新

以上内容是正确的，但是您想知道哪个day是那个drop组件。为此，pass it as a prop to the child drop组件如下所示：

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

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

:day="day"是关键。然后，在handleDrop()中，this.day将是一天

Answer 2

我发现我需要自己传递数据。一种实现方法是包装vue-drag-drop提供的功能。

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

这似乎按预期工作，但是我想知道是否还有另一种方式可以做到，例如使用库属性（类似于 ref ）。

vue-drag-drop：放置事件目标的上下文

2 个答案:

更新