vue.js - In Vue, how do I pass the special $event variable as a paremeter?

Question

In Vue, I'm listening for a change event and trying to pass in the special $event variable to an action like this:

<template>
<div>
      <span>Filter Todos:</span>
      <select @change="filterTodos($event)">

In my action I've just got this for now:

filterTodos(event) {
        console.log('Here is the event:', event);
    }

When the Brad Traversy in my tutorial does this, he gets the Event in his console. But when I do it, I'm getting this:

{getters: {…}, state: {…}, rootGetters: {…}, dispatch: ?, commit: ?, …}
commit: ? boundCommit(type, payload, options)
dispatch: ? boundDispatch(type, payload)
getters: {}
rootGetters: {}
rootState: {__ob__: Observer}
state: {__ob__: Observer}
__proto__: Object

What am I getting there? Why aren't I getting the same as him? No one else in the comments section seems to have a problem with this so I must be doing something silly but I can't spot it...

Answer 1

Since your filterTodos has only one parameter which is actually the event you want, it is not compulsory to pass $event in your template. instead, you can just pass the method name as following,

<template>
<div>
      <span>Filter Todos:</span>
      <select @change="filterTodos" />
</div>
</template>