单个标签的多个监听器绑定

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui #前端 #vue.js

Js 同时被 2 个专栏收录

17 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

文章讲述了在Vue.js中，如何在一个el-button上绑定多个事件处理函数，通过在handleClick方法中调用saveCallout和saveMessage方法来实现。解决了单个按钮同时处理两个不同功能的需求。

单个标签的多个监听器绑定

 <el-button 
	type="primary" 
	plain size="small" 
	@click="saveCallout(scope.row.responses) 
	@click="saveMessage(scope.row.responses)"
 >
      保存标注
 </el-button>

语法错误

目的:对一个按钮绑定多个监听器处理事件

解决方法:通过在一个处理事件内调用两个方法

<el-button type="primary" plain size="small" @click="handleClick(scope.row.responses)">
  保存标注
</el-button>

methods: {
  handleClick(responses) {
    this.saveCallout(responses);
    this.saveMessage(responses);
  },
  saveCallout(responses) {
    // 保存标注的逻辑
  },
  saveMessage(responses) {
    // 保存消息的逻辑
  }
}