VueJS中如何通过变量动态调用方法？拖拽场景代码优化

这绝对是优化冗余if判断的好思路，我来帮你修正写法并给出两种可行的实现方案：

首先，你原来的_this.[type]()写法错误在于多了个点后面的方括号，JavaScript中动态访问对象属性的正确语法是对象[变量名]，所以应该写成_this[type]()，不过我们还要考虑方法存在性检查和更灵活的映射方式，避免报错。

方案1：方法名与元素ID直接关联（命名规范匹配） #

如果你的处理方法和元素ID有固定的命名对应关系（比如元素ID是element1，方法名是handleElement1），可以通过构造方法名的方式动态调用：

原来的冗余代码（参考） #

dragStop: function(event, ui) {
  const _this = this;
  const elementId = ui.draggable.attr('id');
  if (elementId === 'element1') {
    _this.handleElement1();
  } else if (elementId === 'element2') {
    _this.handleElement2();
  } else if (elementId === 'element3') {
    _this.handleElement3();
  }
  // 更多重复的if判断...
}

优化后的代码 #

dragStop: function(event, ui) {
  const _this = this;
  const elementId = ui.draggable.attr('id');
  
  // 根据ID构造对应的方法名（这里假设方法是handle开头，首字母大写）
  const methodName = `handle${elementId.charAt(0).toUpperCase()}${elementId.slice(1)}`;
  
  // 先检查方法是否存在，避免调用不存在的方法报错
  if (typeof _this[methodName] === 'function') {
    _this[methodName]();
  } else {
    console.warn(`未找到ID为 ${elementId} 对应的处理方法：${methodName}`);
  }
}

方案2：使用映射表（ID与方法自由绑定） #

如果元素ID和方法名没有固定命名规则，或者需要更灵活的绑定关系，建议用一个映射对象来关联ID和对应的处理方法，这种方式可读性更强，也更容易维护：

dragStop: function(event, ui) {
  const _this = this;
  const elementId = ui.draggable.attr('id');
  
  // 定义ID到处理方法的映射表
  const idToMethod = {
    'drag-box-1': _this.handleBoxOne,
    'drag-btn-save': _this.handleSaveButton,
    'drag-item-custom': _this.handleCustomItem
  };
  
  // 获取目标方法并调用
  const targetMethod = idToMethod[elementId];
  if (typeof targetMethod === 'function') {
    // 用call确保方法内的this指向Vue实例（如果直接引用实例方法，也可以直接targetMethod()）
    targetMethod.call(_this);
  } else {
    console.warn(`ID为 ${elementId} 的拖拽元素没有对应的处理方法`);
  }
}

关键注意点 #

1. this指向问题：你已经提前用_this = this保存了Vue实例的引用，这很重要，因为jQuery UI的回调函数里this默认指向的是DOM元素，不是Vue实例。
2. 方法存在性检查：一定要加typeof ... === 'function'的判断，避免因为ID拼写错误或者方法未定义导致页面报错。
3. 语法修正：动态调用的正确写法是_this[methodName]()，而不是_this.[methodName]()——去掉点后面的方括号就对啦！

内容的提问来源于stack exchange，提问作者Amit Sharma