Javascript 错误："；v-on处理程序中出现错误：“0”；TypeError:此.filter未定义"&引用；在vue中的列表渲染中？

我正在尝试构建一个组件，该组件创建过滤器按钮，然后通过事件总线发送过滤器对象中的type属性，以便在我的应用程序的其他地方处理。但是，当我在数据部分添加对象数组（过滤器）时，我得到了一个错误。当我单击按钮时，过滤器没有定义

我希望将过滤器数组保留在此组件中，因为我还尝试将活动类动态更改为已单击的按钮

我是否错过了一些与道具有关的东西？当数据和v-for位于另一个组件上时，为什么我无法显示按钮？为了解决这个问题，我一直在问自己这些问题

{{filter.name}
从“@/components/EventBus”导入EventBus
导出默认值{
道具：{
筛选器：{type:String}
},
数据（）{
返回{
activeItem:0，
filterResult:“”，
过滤器：[
{name:'All'，键入：'All'}，
{name:'Holidays'，键入：'holiday'}，
{名称：'季节'，键入：'季节'}，
{name:'Events'，键入：'custom'}
]
}
},
方法：{
emitFilter（）{
this.filterResult=this.filter
EventBus.$emit（'filter-categories'，this.filterResult）
},
选择项目（索引）{
this.activeItem=索引
}
}
}

我的按钮组件用于过滤器组件

过滤器
从“@/components/FilterBtn”导入FilterBtn
导出默认值{
组成部分：{
过滤器
}
//数据（）{
//返回{
//过滤器：[
//{name:'All'，键入：'All'}，
//{name:'Holidays'，键入：'holiday'}，
//{名称：'季节'，键入：'季节'}，
//{name:'Events'，键入：'custom'}
//     ]
//   }
// }
}

---

如您所见，注释部分是我最初使用过滤器的地方，但我必须将它们移动到按钮组件以添加活动类。

您正在将名为

filter

的属性键入

string

传递给您的组件。当您输出

{{filter.name}}

时，您实际上引用的是这个属性，而不是在v-for循环中创建的变量

filter

---

除非将名为“filter”的属性传递给组件，否则此属性将是未定义的。因此，输出

filter.name

将导致此错误消息。

是的，您没有将道具传递给组件，这就是未定义道具的原因

<FilterBtn filter="test" />

我需要问：你是在传递一个对象还是一个字符串

因为您将道具定义为字符串，但实际上将其用作对象

  {{ filter.name }}

也许您还应该将类型设置为Object

  props: {
    filter: { type: Object }
  },

---

我假设您实际上是在尝试从

emitFilter（）

中访问

v-for=“（过滤器，索引）in filters”

的

filter

迭代器。要使其工作，您需要在

@单击绑定中传递
过滤器本身：



然后，处理程序可以直接使用参数：

导出默认值{
方法：{
发射过滤器（过滤器）{
this.filterResult=过滤器
//...
}
}
}
您可能混淆了v-for中参数的顺序，通常是（索引、值）。此外，您还应避免覆盖道具名称。@而且，顺序是正确的，我只是对this.filter未定义的原因感到困惑。覆盖道具名称是什么意思@andypotato@TylerMorales您能告诉我们在哪里使用您的组件吗？我猜你不会把道具传给你的按钮组件吧？使用
this.$props
可以检查available@Ifaruki我刚刚编辑了这篇文章以反映这些变化。我的主要目标是从filters数组中获取类型，并在emitFilter（）方法中的this.filterResult上使用它。很简单，我真正想做的就是传递一个过滤器类型（'all'，'holiday'，…），点击ever按钮。我想发射类型。我想我只是对这个组件如何接收道具感到困惑。我以为道具是父母传给孩子的谢谢！这正是我想要的。巧合的是，在你发帖前几秒钟我就知道了。虽然不完全相同，但我所做的是在@click上将filter.type作为emittFilter的参数传递，然后在方法中使用它。
  props: {
    filter: { type: Object }
  },