With Vue 2.2+, you can programmatically add an event listener with $on(eventName, callback):
new Vue({
el: '#app',
created() {
const EVENTS = [
{name: 'my-event1', callback: () => console.log('event1')},
{name: 'my-event2', callback: () => console.log('event2')},
{name: 'my-event3', callback: () => console.log('event3')}
]
for (let e of EVENTS) {
this.$on(e.name, e.callback); // Add event listeners
}
// You can also bind multiple events to one callback
this.$on(['click', 'keyup'], e => { console.log('event', e) })
}
})<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div>
<!-- v-on:EVENTNAME adds a listener for the event -->
<button v-on:click="$emit('my-event1')">Raise event1</button>
<button v-on:click="$emit('my-event2')">Raise event2</button>
<button v-on:click="$emit('my-event3')">Raise event3</button>
</div>
<div>
<!-- v-on shorthand: @EVENTNAME -->
<button @click="$emit('my-event1')">Raise event1</button>
<button @click="$emit('my-event2')">Raise event2</button>
<button @click="$emit('my-event3')">Raise event3</button>
</div>
</div>With Vue 2.6+, you can add an event listener dynamically in the template:
new Vue({
el: '#app',
data: {
eventname: 'click',
},
methods: {
handler(e) {
console.log('click', e.target.innerText)
}
}
})<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<button @[eventname]="handler">Raise dynamic event</button>
<!-- Set dynamic key to null to remove event listener -->
<button @click="eventname = null">Unbind event</button>
</div>You can also declaratively bind multiple event listeners with v-on="{event1: callback, event2: callback, ...}":
new Vue({
el: '#app',
methods: {
onClick() { console.log('click') },
onKeyUp(e) { console.log('keyup', e.keyCode) }
}
})<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<input type="text" placeholder="type here" v-on="{click: onClick, keyup: onKeyUp}">
</div>