Ошибка: «Ошибка в обработчике v-on:« TypeError: this.filter is undefined »» при отображении списка в vue? - PullRequest
Новая
       148

Ошибка: «Ошибка в обработчике v-on:« TypeError: this.filter is undefined »» при отображении списка в vue?

0 голосов
/ 07 августа 2020

Я пытаюсь создать компонент, который создает кнопки фильтров, а затем отправляет атрибут типа в объекте фильтров через шину событий для обработки в другом месте моего приложения. Однако, когда я добавил массив объектов (фильтров) в раздел данных, я получаю сообщение об ошибке this. Фильтр не определяется, когда я нажимаю кнопку.

Я хотел бы сохранить массив фильтров в этом компоненте, потому что я также пытаюсь динамически изменить активный класс на любую нажатую кнопку.

Мне не хватает чего-то, связанного с реквизитами? Почему я не могу отображать кнопки, когда данные и 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>

Как видите, прокомментированные Изначально у меня были фильтры, но мне пришлось переместить их в компонент кнопки, чтобы добавить активный класс.

Ответы [ 3 ]

1 голос
/ 07 августа 2020

Я предполагаю, что вы на самом деле пытались получить доступ к filter итератору 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
      //...
    }
  }
}
0 голосов
/ 07 августа 2020

Да, вы не передаете опору своему компоненту, поэтому она не определена. 

<FilterBtn filter="test" />

Здесь я передаю опору с именем filter со значением test.

Конечно вы можете передать динамические c реквизиты. Просто свяжите его. 

<FilterBtn :filter="yourData" />

Мне нужно спросить: вы передаете объект или строку?

Потому что вы определили свою опору как строку, но на самом деле используете ее как object 

  {{ filter.name }}

Возможно, вам также следует установить тип как Object. 

  props: {
    filter: { type: Object }
  },
0 голосов
/ 07 августа 2020

Вы передаете компоненту свойство filter с типом string. Когда вы выводите {{ filter.name }}, вы фактически имеете в виду это свойство вместо переменной filter, которую вы создаете в v-for l oop.

Если вы не передали компоненту свойство, называемое «фильтр» , это свойство будет неопределенным. Поэтому вывод filter.name приведет к этому сообщению об ошибке.

...