Vue: Passing multiple @click into components

Question

I have a blade view template that I pass in a parent function like so:

<Flash 
    :flash-status="flashStatus" 
    :flash-content="flashContent"
    v-if="flashStatus === true"
    @click="hideFlashMsg">

</Flash>

but now I need to pass another function in and tried this, but it doesn't work:

<Flash 
    :flash-status="flashStatus" 
    :flash-content="flashContent"
    v-if="flashStatus === true"
    @click="hideFlashMsg"
    @click="addNums">

</Flash>

How do I setup two event listeners for the same event?

score 2 · Answer 1 · answered Mar 15 '19 at 19:19

2

You can call multiple click functions like so:

@click="hideFlashMsg(); addNums();"

Or, have one function handle multiple other functions.

clickhandler(){
    this.function1();
    this.function2();
}

answered Mar 15 '19 at 19:19

ryeMoss

4,153
1
16
33

score 2 · Answer 2 · answered Mar 15 '19 at 21:23

The v-on directive can take an object that sets up multiple listeners for the same event:

{
  EVENTNAME: [HANDLER_1, HANDLER_2, ... HANDLER_N]
}

So you could do:

<Flash v=on"{ click: [hideFlashMsg, addNums] }" />

new Vue({
  el: '#app',
  methods: {
    hideFlashMsg() {
      console.log('hideFlashMsg')
    },
    addNums() {
      console.log('addNums')
    }
  }
})

<script src="https://unpkg.com/vue@2.6.9"></script>

<div id="app">
  <button v-on="{click: [hideFlashMsg, addNums]}">Click</button>
</div>

Vue: Passing multiple @click into components

2 Answers2