Vue中如何为动态创建的元素绑定@click事件？

你的问题出在：直接通过innerHTML添加的onclick事件里，mymethod是在全局作用域查找的，但Vue组件的methods方法是挂载在Vue实例上的，全局环境根本访问不到，所以触发报错。

下面给出两种解决方案，优先推荐第一种符合Vue设计思想的方式：

方案一：用Vue响应式渲染（最优） #

Vue的核心是数据驱动视图，完全不需要手动操作DOM来创建元素。你可以维护一个响应式数组，通过v-for动态渲染元素，直接在模板里绑定@click：

const app = Vue.createApp({
  data() {
    return {
      myID: 24,
      dynamicElements: [] // 用这个数组存需要动态渲染的元素数据
    };
  },
  methods: {
    mymethod(ID) {
      console.log('触发方法，ID:', ID);
    },
    otherFunction() {
      // 往数组里添加数据，Vue会自动渲染对应的元素
      this.dynamicElements.push({ id: this.myID });
    }
  },
  template: `
    <div>
      <button @click="otherFunction">添加元素</button>
      <!-- 用v-for动态渲染，直接绑定@click -->
      <div v-for="item in dynamicElements" :key="item.id" @click="mymethod(item.id)">
        点击触发方法
      </div>
    </div>
  `
});
app.mount('#app');

这种方式完全遵循Vue的响应式机制，无需手动操作DOM，代码更简洁也更易维护。

方案二：手动操作DOM时正确绑定事件（不推荐，仅特殊场景使用） #

如果因为某些特殊需求必须手动创建DOM元素，不要用innerHTML拼接onclick，而是通过addEventListener绑定事件，同时确保this指向Vue实例：

const app = Vue.createApp({
  data() {
    return {
      myID: 24
    };
  },
  methods: {
    mymethod(ID) {
      console.log('触发方法，ID:', ID);
    },
    otherFunction() {
      const dom = document.getElementById('container');
      // 创建元素
      const div = document.createElement('div');
      div.textContent = '点击触发方法';
      // 绑定点击事件，用箭头函数保证this指向Vue实例
      div.addEventListener('click', () => {
        this.mymethod(this.myID);
      });
      // 添加到DOM
      dom.appendChild(div);
    }
  }
});
app.mount('#app');

注意事项 #

• 永远避免用innerHTML拼接事件绑定，不仅会有作用域问题，还存在XSS安全风险。
• Vue开发中优先用数据驱动视图的方式，手动操作DOM是最后的选择，会破坏Vue的响应式追踪。

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