Вызов метода vue из события из VueDraggable - PullRequest
Новая
       34

Вызов метода vue из события из VueDraggable

0 голосов
/ 01 января 2019

Я пытаюсь заставить функцию перетаскивания работать в приложении vue.js, используя vue-draggable https://vuejsexamples.com/vuejs-drag-and-drop-library-without-any-dependency/ В библиотеке есть несколько событий, которые вы можете прослушать, и я хотел бы выполнить некоторую логику, как только элементотброшен.Однако я не могу получить доступ к компоненту vue 'this' вместе с данными и методами.Я пытался использовать this.$dispatch('symDragged', event);, но он не работает по той же причине.this это не экземпляр vue, а экземпляр перетаскиваемого элемента.

Вот код: 

export default {
components: {
  ICol,
  SymptomsChooser, MultiSelectEditor, TempPressureChooser, BodyPartsEditor, MandatorySymptomsChooser},

data() {
  return {
    // data ommited...
    options: {
      dropzoneSelector: 'ul',
      draggableSelector: 'li',
      excludeOlderBrowsers: true,
      showDropzoneAreas: true,
      multipleDropzonesItemsDraggingEnabled: true,
      onDrop(event) {
        // delete symptom from old basket and add it to new one
        let oldBasket = event.owner.accessKey;
        let newBasket = event.droptarget.accessKey;

        //this is not working
        //this.symDragged(this.draggedSymId, oldBasket, newBasket);
      },
      onDragstart(event) {
        this.draggedSymId = event.items[0].accessKey;
      }
    }
  }
},
methods: {
  symDragged(symId, oldBasketId, newBasketId) {
    console.log("symDragged!");

    let draggedSym = this.getSymById(symId);

    let basketOld = this.getBasketById(oldBasketId);
    this.delSym(basketOld, draggedSym);
    this.addSym({baskedId: newBaskedId, sym: draggedSym});

  }
  //other methods ommited
}

}

Итак, как правильно вызвать метод компонента vue из события обратного вызова?Или, может быть, мне нужно создать другое событие, чтобы экземпляр vue мог его прослушать?

Спасибо за помощь!

1 Ответ

0 голосов
/ 01 января 2019

Проблема, с которой вы сталкиваетесь, заключается в том, что с this вы ссылаетесь на возвращенную область объекта данных, а не на компонентную область.Лучший способ решить эту проблему - сделать ссылку на экземпляр компонента, чтобы в дальнейшем вы могли вызывать все, что связано с этим экземпляром.Вы также можете взглянуть на примеры кода и коробки https://codesandbox.io/embed/7kykmmmznq

data() {
  const componentInstance = this;

  return {
    onDrop() {
      let oldBasket = event.owner.accessKey;
      let newBasket = event.droptarget.accessKey;
      let draggedItemsAccessKeys = event.items.map(element => element.accessKey);

      componentInstance.symDragged(
        draggedItemsAccessKeys, 
        oldBasket,
        newBasket
      );
    }

  }
}
...