Sometimes, we want to call multiple functions with the v-on:click or @clicik directive with Vue.js.
In this article, we’ll look at how to call multiple functions with the v-on:click or @clicik directive with Vue.js.
Call Multiple Functions with v-on:click Directive in Vue.js
We call multiple functions with the v-on:click or @clicik directive with Vue.js by calling both functions in the @click directive’s value.
For instance, we can write:
<template>
<div id="app">
<div
@click="
firstFunction();
secondFunction();
"
>
click me
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
firstFunction() {
console.log("first");
},
secondFunction() {
console.log("second");
},
},
};
</script>
We just call firstFunction and secondFunction in @click , and then both methods will be called.
And so when we click on the div, we see 'first' and 'second' logged.
Conclusion
We call multiple functions with the v-on:click or @clicik directive with Vue.js by calling both functions in the @click directive’s value.
