How to Call Multiple Functions with @Click in Vue?

[ad_1]

In Vue.js, you can call multiple functions with @click by either directly invoking multiple functions or using an inline function to call them.

How to Call Multiple Functions with @Click in Vue?

Let’s get started different ways to perform call multiple functions with @click in vue js with examples:

  • Method 1 – Inline Multiple Function Calls
  • Method 2 – Multiple @click Attributes
  • Method 3 – Inline Function with Multiple Calls
  • Method 4 – Passing Event Object and ArgumentsEzoic

Method 1 – Inline Multiple Function Calls

You can call multiple functions directly within the @click attribute by separating them with semicolons. Here’s how you can do it:

<div @click="funFirst('foo'); funSec('bar')">Click me</div>

In this example, when the div is clicked, both funFirst and funSec will be called with the respective arguments.

Ezoic

Method 2 – Multiple @click Attributes

Another approach is to have multiple @click attributes on the same element. Each @click attribute will call a different function. Here’s an example:

<div @click="funFirst('foo')" @click="funSec('bar')">Click me</div>

Method 3 – Inline Function with Multiple Calls

You can also use an inline function to call multiple functions within a single @click attribute. Here’s how you can do it:

Ezoic

<div @click="() => { funFirst('foo'); funSec('bar'); }">Click me</div>

Method 4 – Passing Event Object and Arguments

If you need to pass the event object to your functions along with other arguments, you can use the following approach:

<div @click="() => { funFirst($event, 'foo'); funSec($event, 'bar'); }">Click me</div>

Conclusion

That’s it; you have learned how to call multiple functions when the specified element is clicked in a Vue.js application.

Ezoic

Recommended Tutorials

Ezoic

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518