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

Posted 2023-02-23

【中文标题】vuejs中通过变量动态调用方法

【英文标题】：calling method dynamically through variables in vuejs

【发布时间】：2018-06-25 08:16:53

【问题描述】：

可以通过变量调用方法吗？我有拖放元素具有 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>

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

任何帮助将不胜感激 谢谢

【参考方案1】：

如果你是这样的对象，在 javascript 中：

const foo = 
    bar() ,
    baz() 
;

要“动态地”调用它，你应该输入

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

所以，在你的情况下，而不是：

this.[type]()

你应该输入：

this[type]()

对象可以像数组索引一样被操作，但在这种情况下，索引只是字段

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

在 vuejs 组件的基本函数/方法中，使用 es6 函数字段（如您的挂载，...）。 在此函数中，使用箭头函数为this 保留正确的上下文。在此示例中，您的 drop 函数必须是箭头函数才能正常工作

【讨论】：

它会抛出错误“TypeError: this[type] is not a function”，我也想在 vuejs 中实现。

type 抛出该错误时的值是多少？

@RoyJ，可拖动元素上提到的字符串“db”、“spstep”

那时this 是什么？我怀疑这不是你的组件。你可能想在你的mounted 中做var self = this; 并在jQuery 设置中使用self。

@milan-maharjan 与其他功能完全相同this[type](param1, param2)

【参考方案2】：

你只是认为我将函数作为动态传递。

我将函数名称作为“saveRecord”传递。

试试这个方法。它对我很有效:)

var mydynamic_Function_Name = "saveRecord";
this[mydynamic_Function_Name]();

【讨论】：

我试过这个[get$typeFieldValue](this.action, this.field.id) 但我得到一个错误“不是函数”。

VueJS 中的