我正在嘗試構建一個創建過濾器按鈕的組件，然后通過事件總線發送過濾器對象中的類型屬性，以便在我的應用程序的其他地方處理。但是，當我在數據部分添加對象（過濾器）數組時，單擊按鈕時出現 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>如您所見，注釋部分是我最初擁有過濾器的地方，但我不得不將它們移至按鈕組件以添加活動類。