javascript - vuejs中通过变量动态调用方法

标签 javascript vue.js vuejs2 components webpack-2

是否可以通过变量调用方法?我拖放了具有 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>

上面是我的示例代码,其中我在注释中提到了我的要求。我想根据拖动的元素调用方法。我什至不知道这是可能的,但通过这种方法,我可以减少很多不需要的代码。

任何帮助将不胜感激
谢谢

最佳答案

在 Javascript 中,如果你是这样一个对象:

const foo = {
    bar() {},
    baz() {}
};

要“动态地”调用它,您应该输入

foo['bar']()
foo['baz']()

所以,在你的情况下,而不是:

this.[type]()

你应该输入:

this[type]()

Object could be manipulated like array index but, in this case, indexes are juste the fields

警告:您的 $.droppable().drop 函数未正确绑定(bind)。所以,此时 this 不是 VueJS 组件:

  • 在你的 vuejs 组件的基本函数/方法中使用 es6 函数字段(比如你的挂载,......)。
  • 在此函数内,使用箭头函数为 this 保持正确的上下文。在此示例中,您的 drop 函数必须是箭头函数才能正常工作

关于javascript - vuejs中通过变量动态调用方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48284354/

相关文章:

javascript - 选择冠军id = 13 的数组

javascript - 在比较函数中设置 sort_by

typescript :如何为 npm 模块使用本地类型声明文件

javascript - 通过 jQuery datepicker 将日期转换为 unix 时间戳

javascript - 使用 vuetify-google-autocomplete 和 google map api

javascript - 修补 StockForecasted Javascript Odoo

javascript - 使用jquery从文档头删除脚本需要几秒钟,如何使其即时?

laravel - 如何在 vuejs 和 vuex 中设置带有 httponly 标志的 cookie,cookie 来自服务器(Laravel)

javascript - 用于触发 3,000 多个连续点击启用的前端操作的控制台脚本

javascript - Meteor:如何在html页面上使用光标数组的数组显示列表