0

Is there any way to have multiple v-on:click events on the same item? Im trying to both show/hide toggle a navigation and do a css animation on the item that toggles the navigation. 

<template>
   <div>
        <nav v-if="seen">
            <ul>
                <li><a href="#front" v-smooth-scroll>forside</a></li>
                <li><a href="#services" v-smooth-scroll>ydelser</a></li>
                <li><a href="#cases" v-smooth-scroll>cases</a></li>
                <li><a href="#contact" v-smooth-scroll>kontakt</a></li>
            </ul>
        </nav>
        <div @click="seen = !seen" @click="setActive" id="burger-container">
           <div id="burger">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
           </div>
        </div>    
    </div>
</template>

<script>
    export default {
      data () {
        return {
          seen: false
        }
      },
      methods: {
        setActive (event) {
          event.target.classList.toggle('open')
        }
      }
    }
</script>
Thomas Landauer
  • 7,857
  • 10
  • 47
  • 99
Thomas Alexander Woolff
  • 243
  • 1
  • 4
  • 15
  • Possible duplicate of [How to call multiple function with v-on:click](https://stackoverflow.com/questions/38744932/how-to-call-multiple-function-with-v-onclick) – Lukasz Wiktor Jul 13 '17 at 10:21

1 Answers1

2

Why don't you just add the second event to the function, like this:

methods: {
    setActive (event) {
      event.target.classList.toggle('open')
      this.seen = !this.seen
    }
  }
Thomas Landauer
  • 7,857
  • 10
  • 47
  • 99