如何在vue 中使用@click 调用多个函数? [英] How to call multiple functions with @click in vue?

问题描述

问题:

如何在一次@click 中调用多个函数?(又名 v-on:click)?

我试过了

• 用分号分割函数:

  ;

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

;

但是如何正确地做到这一点?

P.S.:我当然可以做到

函数 fn3(参数){fn1(参数)；fn2(参数)；}

但有时这并不好.

解决方案

在 Vue 2.3 及更高版本上，您可以这样做:

<div v-on:click="firstFunction(); secondFunction();"></div>//或者<div @click="firstFunction(); secondFunction();"></div>

Question:

How to call multiple functions in a single @click? (aka v-on:click)?

I tried

• Split functions with a semicolon: <div @click="fn1('foo');fn2('bar')"> </div>;

• Use several @click: <div @click="fn1('foo')" @click="fn2('bar')"> </div>;

but how to do it properly?

P.S.: For sure I always can do

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

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

But sometimes this isn't nice.

解决方案

On Vue 2.3 and above you can do this:

<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>

这篇关于如何在vue 中使用@click 调用多个函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！