Javascript 从VueDraggable中的事件内部调用vue方法
我正在尝试使用vue Dragable在vue.js应用程序中使用拖放功能 库中只有很少的事件可以侦听,我希望在删除该项后执行一些逻辑。但是,我无法访问vue组件“this”以及数据和方法。我尝试使用Javascript 从VueDraggable中的事件内部调用vue方法,javascript,vue.js,drag-and-drop,event-handling,draggable,Javascript,Vue.js,Drag And Drop,Event Handling,Draggable,我正在尝试使用vue Dragable在vue.js应用程序中使用拖放功能 库中只有很少的事件可以侦听,我希望在删除该项后执行一些逻辑。但是,我无法访问vue组件“this”以及数据和方法。我尝试使用这个.dispatch('symdrable',event)但它不工作的原因是相同的。”这不是vue实例,而是可拖动元素的实例 代码如下: export default { components: { ICol, SymptomsChooser, MultiSelectEditor, Tem
这个.dispatch('symdrable',event)代码>但它不工作的原因是相同的。”这不是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实例可以侦听它
谢谢你的帮助 您面临的问题是,使用this
引用的是返回的数据对象范围,而不是组件范围。解决此问题的最佳方法是引用组件实例,以便稍后可以调用附加到该实例的任何内容。您还可以查看codesandbox示例
这就是我要找的。非常感谢。
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
);
}
}
}