vue-drag-drop: контекст на цели события перетаскивания

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 () я могу видеть событие, которое включает в себя то, что было перетащено в элемент списка, но я не вижу, как у меня есть какой-то контекст, на котором элемент в массиве перетаскиваемая вещь была перетащена в .Я попытался использовать ref на элементе drop , но это не то, что я хотел.

Как узнать, в какой день предмет был перетащен?

Answer 1

Я понял, что должен передать данные сам.Один из способов сделать это - обернуть функцию, предоставляемую 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 ).

Answer 2

Может быть, я что-то пропустил, но не будет ли this в handleDrop() компонентом, на который был сброшен?Вот как обстоят дела с другими обработчиками событий в Vue.

См. здесь для примера :

<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 компонентом.Чтобы достичь этого, передайте его в качестве опоры дочернему компоненту 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 будет день