logo标签列表

Vue：如何使用@click调用多个函数？

javascriptfunctionvue.js
197

如何在单个@click（又称v-on:click）中调用多个函数？

到目前为止，我尝试了:

  • 使用分号分隔函数：<div @click="fn1('foo');fn2('bar')"> </div>；

  • 使用多个@click：<div @click="fn1('foo')" @click="fn2('bar')"> </div>；

作为一种解决方法，我可以创建一个处理程序：

<div v-on:click="fn3('foo', 'bar')"> </div>

function fn3 (args) { 
  fn1(args);
  fn2(args);
}

但有时这不是很好。正确的方法/语法是什么？

我坚信我的答案更符合Vue的风格。https://stackoverflow.com/a/58744983/7854594 - undefined
20个回答
398

在Vue 2.3及以上版本中，您可以这样做：

<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>
这些方法是否保证按顺序执行？ - Andrew Brown
4
这会在Vue.js v2.6.14上产生警告： return语句后的不可达代码如果有人觉得这很烦人 - 你可以尝试像这样做： <div @click="()=>{firstFunction(); secondFunction();}"></div> - Glenn Carver
2
不建议那些使用 "semi": false 的 prettier 的人，因为它会删除分号。我建议在函数名称之间使用加号。 - ARNON
这个代码在省略函数括号 () 的情况下可以工作，但是不加括号会出错。 - Artur Müller Romanov
不适用于Vue3。useToggle没有回调函数是毫无意义的。 - Sandwich
我坚信我的答案更符合Vue的风格。https://stackoverflow.com/a/58744983/7854594 - undefined
51

首先，您可以使用简短的符号@click代替v-on:click，以提高可读性。

其次，您可以使用点击事件处理程序调用其他函数或方法，就像@Tushar在他上面的评论中提到的那样，这样最终您会得到类似于以下内容：

<div id="app">
   <div @click="handler('foo','bar')">
       Hi, click me!
   </div>
</div>

<!-- link to vue.js !--> 
<script src="vue.js"></script>

<script>
   (function(){
        var vm = new Vue({
            el:'#app',
            methods:{
                method1:function(arg){
                    console.log('method1: ',arg);
                },
                method2:function(arg){
                    console.log('method2: ',arg);
                },
                handler:function(arg1,arg2){
                    this.method1(arg1);
                    this.method2(arg2);
                }
            }
        })
    }()); 
</script>
如果在@vueuse/core中使用useToggle，它将没有帮助。 - Sandwich
我坚信我的答案更符合Vue的风格。https://stackoverflow.com/a/58744983/7854594 - undefined
44

如果您想要更易读一些的内容，可以尝试这个：

<button @click="[click1($event), click2($event)]">
  Multiple
</button>

对我来说，这个解决方案更像Vue的风格，希望你喜欢。

同时也可以这样做 @click="click1($event); click2($event)"。 这里的主要点是向处理函数添加显式事件参数。这样每个方法都将获得相同的有效负载或原始事件数据。 在监听来自子组件的自定义事件的情况下非常重要。 - Saulius Vikerta
26

更新于2021年12月

您需要用逗号进行分隔 就像这样：

<button @click="open(), onConnect()">Connect Wallet</button>
15

添加一个匿名函数可能是另一种选择：

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
14
ES6 的替代方法：@click="() => { function1(参数); function2(参数); }" - AdamJB
1
重要提示：如果您的嵌套函数需要 $event 作为参数，则需要将其作为参数传递给新函数，以便在其中使用。例如：($event) => {func1($event); func2('x');} - zcoop98
11

分成几部分。

行内：

<div @click="f1() + f2()"></div>

或：通过复合函数实现：

<div @click="f3()"></div> 

<script>
var app = new Vue({
  // ...
  methods: {
    f3: function() { f1() + f2(); }
    f1: function() {},
    f2: function() {}
  }
})
</script>
9
这是一种简单的方法来实现v-on:click="firstFunction(); secondFunction();"。
3
我认为这会使编译器失效且无法渲染。我刚试过了，出错了。 - Chris Johnson
我可以看到以下代码对一些人有效，但在我的2.6.6版本中出现了错误。 - Chris Johnson
9

在这里，我想要补充一个小细节，我觉得在上面所有的答案中都遗漏了；那就是当您想要添加多个点击处理程序时，实际上需要调用该方法而不仅仅是传递其名称作为可调用对象。

这可能会让人感到惊讶，因为Vue允许将可调用对象传递给click处理程序。

这样做是有效的

<div><button @click="foo(); bar();">Button1</button></div>
<div><button @click="foo">Button2</button></div>

这并不

<div><button @click="foo; bar;">Button3</button></div>

JsFiddle示例

8

当你需要通过点击对话框内的按钮打开另一个对话框并关闭此对话框时，以下方法适用于我。将值作为参数传递，使用逗号分隔符。

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>
6

基于ES6使用匿名函数：

<button @click="() => { function1(); function2(); }"></button>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接