错误：“v-on 处理程序中的错误：“TypeError：this.filter 未定义”在 vue 中的列表呈现中？

Question

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

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

我错过了与道具有关的东西吗？当 data 和 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

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

<button v-for="(filter, index) in filters"
        @click="emitFilter(filter)">

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

export default {
  methods: {
    emitFilter(filter) {
      this.filterResult = filter
      //...
    }
  }
}

Answer 2

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

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

Answer 3

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

<FilterBtn filter="test" />

这里我传递了一个名为filter 的道具，其值为test。

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

<FilterBtn :filter="yourData" />

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

因为你将你的 prop 定义为一个字符串，但你实际上将它用作一个对象

  {{ filter.name }}

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

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