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

Question

[SolidMike]

У меня есть каталог товаров и фильтрация с 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. И вообще ощущение, что это какой-то костыль. Подскажите пожалуйста.

Answer 1

[Андрей Хохлов]

data:
1) Все отели
2) Отели, который передаются в HotelsList
3) Фильтры

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

Comments

[SolidMike]

Не совсем понял, если честно. Мой опыт пользования vue примерно 10 часов, нужно что-то более наглядное)

[Андрей Хохлов]

export default {
  data() {
    return {
      hotels: [],
      visibleHotels: [],
      selected_countries: null,
      selected_types: null,
      reviews_amount: '',
      checked_stars: [],
      price_range: '',
    };
  },
  methods: {
    applyFilters() {
      this.visibleHotels = this.hotels.filter(() => { /* логика фильтрации */ });
    },
    resetFilters() {
      this.selected_countries = null;
      this.selected_types = null;
      this.reviews_amount = '';
      this.checked_stars = [];
      this.price_range = '';
      this.applyFilters();
    },
  },
}

<HotelsList :listData="visibleHotels" />
<button type="button" @click="applyFilters()">
<button type="button" @click="resetFilters()">

[SolidMike]

Андрей Хохлов,
Я понял вашу мысль, но видимо моя реализация хромает

applyFilters() {
      this.visibleHotels = this.hotels.filter((h) => {
        if (this.selected_types == null || !this.selected_types.length) {
          this.selected_types.includes(h.type)
        }
        if (
          this.selected_countries == null ||
          !this.selected_countries.length
        ) {
          this.selected_countries.includes(h.country)
        }
        if (!this.reviews_amount) {
          this.reviews_amount <= h.reviews_amount
        }
        if (!this.checked_stars.length) {
          this.checked_stars.includes(h.stars.toString())
        }
        if (!this.price_range.length) {
          this.price_range[0] <= h.min_price &&
            this.price_range[1] >= h.min_price
        }
      })
    },

[Андрей Хохлов]

SolidMike, отложите Vue до момента как разберетесь с js