Can I add multiple v-on:click events to the same element? I want to toggle a navigation menu and trigger a CSS animation on the element that toggles the navigation.
<template>
<div>
<nav v-if="visible">
<ul>
<li><a href="#front" v-smooth-scroll>Home</a></li>
<li><a href="#services" v-smooth-scroll>Services</a></li>
<li><a href="#cases" v-smooth-scroll>Cases</a></li>
<li><a href="#contact" v-smooth-scroll>Contact</a></li>
</ul>
</nav>
<div @click="visible = !visible" @click="activateAnimation" id="burger-container">
<div id="burger">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
activateAnimation (event) {
event.target.classList.toggle('open')
}
}
}
</script>