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?
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()
}
}
