vue.js - Filters in computed component parent in modal

Question

Hello I am having a problem with a project which was already coded in Vue JS. Let me explain I have a filter logic according to 3 criteria. Basically everything was in the same component (the result cards as well as the filter fields). I want to implement the filter logic in a modal. All the filter logic is done in a computed.

computed: {
    ...mapGetters(['getOffers', 'dataModal', 'getOffersMeta', 'getDataModalSearch']),
    selectedHousings: function () {
      return this.getOffers.filter(offer => {
        return offer.residence_type.includes(this.housings)
      })
    },
    selectedAgricultures: function () {
      return this.getOffers.filter(function (offer) {
        return this.agricultures.includes(offer.offer_agriculture_type)
      }, this)
    },
    selectedAnimals: function () {
      return this.getOffers.filter(function (offer) {
        return this.animals.includes(offer.offer_animals)
      }, this)
    },

    offerFiltered () {
      var filterList = {
        housings: [],
        agricultures: [],
        animals: []
      }
      if (this.filters.housings.length) {
        this.filters.housings.forEach(housing => {
          filterList.housings.push(housing.value)
        })
      }

      if (this.filters.agricultures.length) {
        this.filters.agricultures.forEach(agri => {
          filterList.agricultures.push(agri.value)
        })
      }

      if (this.filters.animals.length) {
        this.filters.animals.forEach(animal => {
          filterList.animals.push(animal.value)
        })
      }

      if (
        filterList.housings.length ||
        filterList.agricultures.length ||
        filterList.animals.length
      ) {
        console.log('FILTER', this.filter(filterList))
        return this.filter(filterList)
      } else {
        return this.getOffers
      }
    }
  },

And the filter method

    filter (filter) {
      this.offerListFiltered = []
      var animals = []
      var agricultureTypes = []

      this.getOffers.forEach(offer => {
        agricultureTypes = []
        animals = []

        if (offer.agriculture_types) {
          Object.entries(offer.agriculture_types).forEach(item => {
            if (item[1] === true) {
              agricultureTypes.push(item[0])
            }
          })
        }

        if (offer.animals) {
          Object.entries(offer.animals).forEach(item => {
            if (item[1] === true) {
              animals.push(item[0])
            }
          })
        }

        if (filter.housings.length) {
          if (filter.agricultures.length) {
            if (filter.animals.length) {
              if (
                this.hasHousingType(offer.residence_type, filter.housings) &&
                this.hasAgricultureType(
                  agricultureTypes,
                  filter.agricultures
                ) &&
                this.hasAnimal(animals, filter.animals)
              ) {
                if (this.offerListFiltered.length) {
                  if (!this.containsObject(offer, this.offerListFiltered)) {
                    this.offerListFiltered.push(offer)
                  }
                } else {
                  this.offerListFiltered.push(offer)
                }
              }
            } else {
              if (
                this.hasHousingType(offer.residence_type, filter.housings) &&
                this.hasAgricultureType(agricultureTypes, filter.agricultures)
              ) {
                if (this.offerListFiltered.length) {
                  if (!this.containsObject(offer, this.offerListFiltered)) {
                    this.offerListFiltered.push(offer)
                  }
                } else {
                  this.offerListFiltered.push(offer)
                }
              }
            }
          } else {
            if (filter.animals.length) {
              if (
                this.hasHousingType(offer.residence_type, filter.housings) &&
                this.hasAnimal(animals, filter.animals)
              ) {
                if (this.offerListFiltered.length) {
                  if (!this.containsObject(offer, this.offerListFiltered)) {
                    this.offerListFiltered.push(offer)
                  }
                } else {
                  this.offerListFiltered.push(offer)
                }
              }
            } else {
              if (this.hasHousingType(offer.residence_type, filter.housings)) {
                if (this.offerListFiltered.length) {
                  if (!this.containsObject(offer, this.offerListFiltered)) {
                    this.offerListFiltered.push(offer)
                  }
                } else {
                  this.offerListFiltered.push(offer)
                }
              }
            }
          }
        } else {
          if (filter.agricultures.length) {
            if (filter.animals.length) {
              if (
                this.hasAgricultureType(
                  agricultureTypes,
                  filter.agricultures
                ) &&
                this.hasAnimal(animals, filter.animals)
              ) {
                if (this.offerListFiltered.length) {
                  if (!this.containsObject(offer, this.offerListFiltered)) {
                    this.offerListFiltered.push(offer)
                  }
                } else {
                  this.offerListFiltered.push(offer)
                }
              }
            } else {
              if (
                this.hasAgricultureType(agricultureTypes, filter.agricultures)
              ) {
                if (this.offerListFiltered.length) {
                  if (!this.containsObject(offer, this.offerListFiltered)) {
                    this.offerListFiltered.push(offer)
                  }
                } else {
                  this.offerListFiltered.push(offer)
                }
              }
            }
          } else {
            if (filter.animals.length) {
              if (this.hasAnimal(animals, filter.animals)) {
                if (this.offerListFiltered.length) {
                  if (!this.containsObject(offer, this.offerListFiltered)) {
                    this.offerListFiltered.push(offer)
                  }
                } else {
                  this.offerListFiltered.push(offer)
                }
              }
            }
          }
        }
      })
      this.getOffersMeta.total_count = this.offerListFiltered.length
      this.filterDataModal = this.offerListFiltered
      return this.offerListFiltered 

I told myself that by managing the state of this filter in the state of the modal and then clicking on a button we trigger the action that would update the state of VueX So i create de filtrer method :

    filtrer () {
      this.setFilterDataModal(this.filterDataModal)
    },

Which is triggered at the click of the button

      <button @click="filtrer">Filtrer</button>

I see that it works but only in the view tool and when I am on the component otherwise if I am going to analyze another component or that I close VueDevTools nothing more happens

And suddenly I admit that I am blocked and that I do not understand why the state and the actions do not trigger

Thank you very much for any advice you can give me Good evening

question from:https://stackoverflow.com/questions/65943512/filters-in-computed-component-parent-in-modal

Answer 1

Waitting for answers