Question

在 Vue 中，我正在侦听更改事件并尝试将特殊的 $event 变量传递给这样的操作：

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

在我的行动中，我现在刚刚得到这个：

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

当我的教程中的 Brad Traversy 执行此操作时，他会在控制台中获取事件。但是当我这样做时，我得到了这个：

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

我要去那里做什么？为什么我和他不一样？评论部分中的其他人似乎对此没有问题，所以我一定是在做一些愚蠢的事情，但我无法发现它......

Answer 1

由于您的 filterTodos 只有一个参数，它实际上是您想要的事件，因此不必在模板中传递 $event。相反，您可以按如下方式传递方法名称，

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

Answer 2

我现在意识到错误了……我不能让那个参数“事件”作为我的 filterTodos 操作中的唯一参数。如果我执行以下操作，则它会起作用，并且我会在控制台中收到该事件...

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

因此，操作的第一个参数（在本例中为 { commit }）与我稍后将在本教程中与该操作相关的任何更改相关。 'event' 需要是我的第二个参数，即使 '$event' 是我调用此操作时的唯一参数。

在 Vue 中，如何将特殊的 $event 变量作为参数传递？

2 个答案: