@SolidMike

Как передать computed data в дочерний template по клику?

У меня есть каталог товаров и фильтрация с 2-мя кнопками: "применить фильтры" и "сбросить фильтры". В данный момент все работает, но только динамически. Я произвожу фильтрацию, собираю ее в computed свойстве и его передаю в шаблон.
<HotelsList v-bind:listData="filterHotels" />
data() {
    return {
      hotels: [{},{} и т.д.        },
      ],
  computed: {
    filterHotels() {
      return this.filteredByCountry(
        this.filteredByType(
          this.filteredByReviewsAmount(
            this.filteredByStars(this.filteredByPrice(this.hotels))
          )
        )
      )
    },
    priceOutput() {
      return this.price_range
    },
  },
methods: {
    isNumber(evt) {
      evt = evt ? evt : window.event
      var charCode = evt.which ? evt.which : evt.keyCode
      if (
        charCode > 31 &&
        (charCode < 48 || charCode > 57) &&
        charCode !== 46
      ) {
        evt.preventDefault()
      } else {
        return true
      }
    },
    filteredByType(hotels) {
      if (this.selected_types == null || this.selected_types.length == 0)
        return hotels
      return hotels.filter((h) => this.selected_types.includes(h.type))
    },
    filteredByCountry(hotels) {
      if (
        this.selected_countries == null ||
        this.selected_countries.length == 0
      )
        return hotels
      return hotels.filter((h) => this.selected_countries.includes(h.country))
    },
    filteredByReviewsAmount(hotels) {
      if (!this.reviews_amount) return hotels
      return hotels.filter((h) => this.reviews_amount <= h.reviews_amount)
    },
    filteredByStars(hotels) {
      if (!this.checked_stars.length) return hotels
      return hotels.filter((h) =>
        this.checked_stars.includes(h.stars.toString())
      )
    },
    filteredByPrice(hotels) {
      if (!this.price_range) return hotels
      return hotels.filter((h) => this.price_range >= h.min_price)
    },
    filtersReset() {
      this.selected_countries = null
      this.selected_types = null
      this.reviews_amount = ''
      this.checked_stars = []
      this.price_range = ''
    },
  },

Мне же нужно, чтобы фильтрация срабатывала только по клику "применить фильтры". Я попытался сделать так:
<button type="button" @click="filtersApply(filterHotels)">

<HotelsList v-bind:listData="hotels" />
и добавил метод
filtersApply(array) {
      this.hotels = array
    },

Вроде как фильтрация по клику заработала, но теперь не работает reset. И вообще ощущение, что это какой-то костыль. Подскажите пожалуйста.
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
data:
1) Все отели
2) Отели, который передаются в HotelsList
3) Фильтры

methods:
4) Метод, который применяет фильтры - заполняет (2) подходящими по фильтрам элементами из (1)
5) Метод, который сбрасывает значения фильтров и вызывает метод (4)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект