javascript - 从 VueDraggable 的事件内部调用 vue 方法
问题描述
我正在尝试使用 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 实例可以监听它?
谢谢你的帮助!
解决方案
您面临的问题是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
);
}
}
}
推荐阅读
- java - 适配器抛出 java.lang.NullPointerException
- python - PyWin32 (226) 和虚拟环境
- r - eventReactive 对所有输入值做出反应
- java - 找不到属性的 setter 方法:spring boot 中的错误
- xquery - 删除marklogic中具有多个版本的文档的最佳方法
- scala - Scala - 如何以函数式风格重构代码
- python - 如何使用for/while循环在python中编写过滤函数?
- reactjs - DatePicker '@y0c/react-datepicker' 默认值
- r - 更新 R 闪亮数据表中的单元格时出现问题
- sql - 如果多次找到一个字段,如何不获取数据