可以通过变量调用该方法吗?我有ID的拖放元素,根据ID我必须调用该方法.
<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>
以上是我的示例代码,我在注释中提到了我的需求.我想根据拖拽的元素调用这些方法.我甚至不知道这是可能的,但通过这种方法,我可以减少很多不需要的代码.
任何帮助都将不胜感激