Trigger multiple methods on event and pass event variable

Question

Using vue, I am trying to trigger multiple events on a click and pass 'event' variable, so that I can use event.target.

I tried this:

<element @click="onSubmit(), onChange()"></element>

And in my methods, I tried

methods: {
    onSubmit(e) {
       console.log(e)
    },

    onChange(e) {
      console.log(e)
    }
}

Cannot read property 'target' of undefined

What is the proper way of achieving this?

Bert · Accepted Answer · 2017-08-16T23:42:32.703

In your template

<element @click="onClick"></element>

And in methods

methods: {
    onSubmit(e) {
       console.log(e)
    },

    onChange(e) {
      console.log(e)
    },

    onClick(e){
      this.onSubmit(e)
      this.onChange(e)
    }
}

When no argument is provided, event is always the first argument to an event handler. Alternatively, in the template you can use $event to reference the current event.

<element @click="onClick($event)"></element>

I guess it should also be noted that event is a global variable and would be accessible in both of the functions being called without having to be passed.

methods: {
    onSubmit() {
       console.log(event.target) // will log the element that was clicked
    },

    onChange() {
      console.log(event.target) // will log the element that was clicked
    },

    onClick(){
      this.onSubmit()
      this.onChange()
    }
}

Trigger multiple methods on event and pass event variable

1 Answers1