Obtain event object from the event listener

[weijyewang]

Take the example:

<fab
   :position="position"
   :bg-color="bgColor"
   :actions="fabActions"
   @cache="cache"
   @alertMe="alert"
></fab>

Says I have 5 buttons with alertMe event registered. I want to special handle each button to do something very specify depending on which button it is. Is there a way to know which button is triggering the event listener method via event object?

Maybe something like:

<script>
import fab from 'vue-fab'

export default {
  components: {
    fab
  },
   data(){
      return {
          bgColor: '#778899',
          position: 'top-right',
          fabActions: [
              {
                  name: 'cache',
                  icon: 'cached'
              },
              {
                  name: 'alertMe',
                  icon: 'add_alert'
              }
          ]
      }
  },
  methods:{
      cache(){
          console.log('Cache Cleared');
      },
      alert(event){ // Here is some event info.
         if (event.src.id === 1) { // First button
          alert('Clicked on alert icon');
         }

         if (event.src.id === 2) { // Second button
          alert('Oh no. Something went wrong!');
          // Do something.
         }

      }
  }
}
</script>

[jerrychee94]

I agree on Wei Jye,

We should have a common method to handle multiple buttons. Here's another suggestion where you can pass parameter to event listener. Likewise in the emitter method here

instead having our event emitter calling multiple listeners like below:\ of this:
toParent(name) { this.$emit(name); this.toggle = false; },
I would suggest that we pass parameter like below :
toParent(name) { this.$emit('button-clicked',name); this.toggle = false; },