如何在Vue的v-for中为生成的元素动态绑定方法？

当然可行！你遇到的TypeError: e.apply is not a function错误，核心原因是你绑定的btn.method是字符串，而Vue期望点击事件绑定的是一个函数引用——字符串本身不是函数，自然无法调用它的apply方法。

下面给你三种可行的解决方案，你可以根据场景需求选择：

方案1：直接绑定方法引用（推荐简单场景） #

修改数据结构，把method字段从字符串改成实际的方法引用。注意Vue的data初始化时无法直接访问this，我们可以在created钩子中完成赋值：

var formButtons = new Vue({ 
 el: "#formButtons", 
 data: { 
 buttons: [ 
 { id: "login", text: "Login", method: null }, 
 { id: "cancel", text: "Cancel", method: null } 
 ] 
 }, 
 created() {
   // 在实例创建后，把方法引用赋值给对应按钮
   this.buttons.find(btn => btn.id === 'login').method = this.submitForm;
   this.buttons.find(btn => btn.id === 'cancel').method = this.clearForm;
 },
 methods: { 
 submitForm: function (event) { 
   // 你的登录逻辑
   console.log('提交表单');
 }, 
 clearForm: function (event) { 
   // 你的取消逻辑
   console.log('清空表单');
 } 
 }, 
 template: ` 
 <div> 
 <div class="form-group" v-for='btn in buttons' :key='btn.id'> 
 <button :id='btn.id' @click='btn.method' > 
 {{ btn.text }} 
 </button> 
 </div> 
 </div> 
 ` 
});

注：我给v-for添加了:key属性，这是Vue列表渲染的最佳实践，能避免组件复用时出现异常行为。

方案2：模板中通过方法名索引调用 #

如果不想修改data的原有结构，你可以在模板中直接通过Vue实例的方法名索引获取函数并调用，保持method字段为字符串也能正常工作：

// data部分保持原结构，method仍为字符串
var formButtons = new Vue({ 
 el: "#formButtons", 
 data: { 
 buttons: [ 
 { id: "login", text: "Login", method: "submitForm" }, 
 { id: "cancel", text: "Cancel", method: "clearForm" } 
 ] 
 }, 
 methods: { 
 submitForm: function (event) { console.log('提交表单'); }, 
 clearForm: function (event) { console.log('清空表单'); } 
 }, 
 template: ` 
 <div> 
 <div class="form-group" v-for='btn in buttons' :key='btn.id'> 
 <!-- 通过this[btn.method]获取方法，再传递event参数 -->
 <button :id='btn.id' @click='this[btn.method](event)' > 
 {{ btn.text }} 
 </button> 
 </div> 
 </div> 
 ` 
});

方案3：通用处理函数（适合复杂场景） #

如果你的按钮逻辑需要额外校验或统一处理，可以写一个通用的点击处理函数，接收方法名并调用对应方法，同时做容错处理：

var formButtons = new Vue({ 
 el: "#formButtons", 
 data: { 
 buttons: [ 
 { id: "login", text: "Login", method: "submitForm" }, 
 { id: "cancel", text: "Cancel", method: "clearForm" } 
 ] 
 }, 
 methods: { 
 submitForm: function (event) { console.log('提交表单'); }, 
 clearForm: function (event) { console.log('清空表单'); },
 // 通用点击处理函数
 handleButtonClick(methodName, event) {
   // 先判断方法是否存在，避免报错
   if (typeof this[methodName] === 'function') {
     this[methodName](event);
   } else {
     console.warn(`方法 ${methodName} 不存在`);
   }
 }
 }, 
 template: ` 
 <div> 
 <div class="form-group" v-for='btn in buttons' :key='btn.id'> 
 <button :id='btn.id' @click='handleButtonClick(btn.method, event)' > 
 {{ btn.text }} 
 </button> 
 </div> 
 </div> 
 ` 
});

以上三种方法都能实现你的需求：登录按钮绑定submitForm方法、取消按钮绑定clearForm方法。

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