Is it possible to call the method through variables? I have drag and drop elements having ID and according to id I have to call the method.
Consider the following Eg.
<template>
<div>
<div id=draggable>
<div class=draggable id=db>Step2</div>
<div class=draggable id=spstep> Step</div>
<div class=draggable id=merge>Merge</div>
<div class=draggable id=copy>copy</div>
</div>
<div id=id=draggable>Drop Here</div>
</div>
</template>
<script>
export default {
data () {
}
mounted () {
var _this = this
$(.draggable).draggable({
grid: [ 20, 20 ],
appendTo: '#droppable',
// containment: window,
cursor: 'move',
revertDuration: 100,
revert: 'invalid',
helper: 'clone',
refreshPositions: true,
scroll: true,
containment: document,
zIndex: 10000,
});
$(#droppable).droppable({
accept: .draggable,
tolerance: intersect,
drop: function (event, ui) {
var leftPosition = pos.left;//ui.offset.left - $(this).offset().left;
var topPosition = pos.top;//ui.offset.top - $(this).offset().top;
console.log(leftPosition + + topPosition);
var type = ui.draggable.attr(id);
//Here call methods according to id of draggable element
//like
//current implement which is not enhanced code
if(type == 'db')
_this.db()
if(type == 'spstep')
_this.spstep()
if(type == 'merge')
_this.merge()
if(type == 'copy')
_this.copy()
//desired implementation alike
_this.[type]() // this syntax is wrong and throws an error
}
});
}
methods: {
db(){
//db called do something
}
spstep(){
//spstep called do something
}
merge(){
//merge called do something
}
copy(){
//copy called do something
}
}
</script>
<style>
</style>
Above is my sample code in which I have mentioned my requirements in comments.I want to call the methods according to dragged element. I don't know even this is possible but by this approach, I can reduce lots of unwanted code.
Any help would be highly appreciated
Thanks