从 VueDraggable 的事件内部调用 vue 方法答案

【问题标题】：Calling the vue method from inside an event from VueDraggable从 VueDraggable 的事件内部调用 vue 方法
【发布时间】：2019-05-28 11:34:03
【问题描述】：

我正在尝试使用 vue-draggable https://vuejsexamples.com/vuejs-drag-and-drop-library-without-any-dependency/ 在 vue.js 应用程序中使用拖放功能该库几乎没有您可以收听的事件，我想在删除项目后执行一些逻辑。但是，我无法访问 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 实例可以监听它？

感谢您的帮助！

【问题讨论】：

标签： javascript vue.js drag-and-drop event-handling draggable

【解决方案1】：

您面临的问题是this 您引用的是返回的数据对象范围而不是组件范围。解决此问题的最佳方法是引用组件实例，以便稍后您可以调用附加到该实例的任何内容。你也可以看看codesandbox例子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
      );
    }

  }
}

【讨论】：

这就是我想要的。谢谢！