错误：“v-on 处理程序中的错误：“TypeError：this.filter 未定义”

Question

我正在尝试构建一个创建过滤器按钮的组件，然后通过事件总线发送过滤器对象中的类型属性，以便在我的应用程序的其他地方处理。但是，当我在数据部分添加对象（过滤器）数组时，单击按钮时出现 this.filter is not defined 错误。我想将过滤器数组保留在此组件中，因为我还试图将活动类动态更改为已单击的任何按钮。我错过了与道具有关的东西吗？当数据和 v-for 在另一个组件上时，为什么我无法显示按钮？为了解决这个问题，我一直在问自己这些问题。<template>  <div>    <button      v-for="(filter, index) in filters"      :key="index"      :class="{ active: index === activeItem }"      @click="emitFilter(), selectItem(index)"      :filter="filter"    >      {{ filter.name }}    </button>  </div></template><script>import EventBus from '@/components/EventBus'export default {  props: {    filter: { type: String }  },  data() {    return {      activeItem: 0,      filterResult: '',      filters: [        { name: 'All', type: 'all' },        { name: 'Holidays', type: 'holiday' },        { name: 'Seasons', type: 'season' },        { name: 'Events', type: 'custom' }      ]    }  },  methods: {    emitFilter() {      this.filterResult = this.filter      EventBus.$emit('filter-catagories', this.filterResult)    },    selectItem(index) {      this.activeItem = index    }  }}</script>我的按钮组件用于过滤器组件<template>  <div>    <span>filters</span>      <FilterBtn />    </div>  </div></template><script>import FilterBtn from '@/components/FilterBtn'export default {  components: {    FilterBtn      }  // data() {  //   return {  //     filters: [  //       { name: 'All', type: 'all' },  //       { name: 'Holidays', type: 'holiday' },  //       { name: 'Seasons', type: 'season' },  //       { name: 'Events', type: 'custom' }  //     ]  //   }  // }}</script>如您所见，注释部分是我最初拥有过滤器的地方，但我不得不将它们移至按钮组件以添加活动类。

Answer 1

我假设您实际上是在尝试访问from within的filter迭代器。为此，您需要在绑定中传递itself ：v-for="(filter, index) in filters"emitFilter()filter@click

<button v-for="(filter, index) in filters"

        @click="emitFilter(filter)">

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

export default {

  methods: {

    emitFilter(filter) {

      this.filterResult = filter

      //...

    }

  }

}

Answer 2

您正在将一个名为filtertyped的道具传递string给您的组件。当您输出时，{{ filter.name }}您实际上是在引用此属性，而不是filter您在 v-for 循环中创建的变量。

除非您将名为“filter”的属性传递给您的组件，否则该属性将是未定义的。因此输出filter.name将导致此错误消息。

Answer 3

您正在将一个名为filtertyped的道具传递string给您的组件。当您输出时，{{ filter.name }}您实际上是在引用此属性，而不是filter您在 v-for 循环中创建的变量。

除非您将名为“filter”的属性传递给您的组件，否则该属性将是未定义的。因此输出filter.name将导致此错误消息。

Answer 4

是的，你没有将 prop 传递给你的组件，这就是为什么它是未定义的。

<FilterBtn filter="test" />

在这里，我传递了一个名为 propfilter的值test。

当然你可以传递动态道具。绑定就行了

<FilterBtn :filter="yourData" />

我需要问：你传递的是对象还是字符串？

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

  {{ filter.name }}

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

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