如何通过从复选框中应用多个过滤器来过滤对象数组？

Question

我会尽量简单地描述它。

有一个 App 组件，在那里我从 JSON 接收数据并将其放入 flightsList。

然后我想通过 FlightOptions 和 Airlines 组件中的复选框过滤这个数组数据。

问题是我不明白如何同时应用多个过滤器。

<template>
     <div id="app">
      <div class="filters">
        <FlightOptions @clicked="onCheckboxClick" />
        <Airlines v-bind:airlinesList="airlinesList" />
     </div>
     <div class="flightsList">
       <FlightsList v-bind:flightsList="filteredFlightsList" />
     </div>
    </div>
  </template>

export default {
  name: "App",
  components: {
    FlightOptions,
    Airlines,
    FlightsList,
  },
  data() {
    return {
      flightsList: [],
      airlinesList: {},
      optionsFilters: [],
    };
  },
  mounted() {
    this.getFlightsList();
  },
  methods: {
    onCheckboxClick(value) {
      this.optionsFilters = value;
      console.log(value);
    },
    getFlightsList() {
      fetch("results.json")
        .then((res) => res.json())
        .then((data) => {
          this.airlinesList = data.airlines;
          this.flightsList = data.flights;
        })
        .catch((err) => console.error("Error", err));
    },
  },
  computed: {

     // I tried many ways to filter, but it does not word with multiple conditions

 }
   
};

----------- FlightOptions -------------

<template>
  <div class="options">
    <p class="options__title">Опции тарифа</p>
    <div class="options__checkbox">
      <input v-model="optionsFilters" value="onlyDirect" type="checkbox" id="onlyDirect" />
      <label for="onlyDirect">Только прямые</label>
    </div>
    <div class="options__checkbox">
      <input v-model="optionsFilters" value="withBaggage" type="checkbox" id="withBaggage" />
      <label for="withBaggage">Только с багажом</label>
    </div>
    <div class="options__checkbox">
      <input v-model="optionsFilters" value="onlyReturn" type="checkbox" id="onlyReturn" />
      <label for="onlyReturn">Только возвратные</label>
    </div>
  </div>
</template> 

<script>
export default {
  data() {
    return {
      optionsFilters: []
    }
  },
  watch: {
    optionsFilters: function() {
      this.$emit('clicked', this.optionsFilters)
    }  
  }
}
</script>

Answer 1

试试这个：

computed: {
  filteredFlightsList() {
    if (!optionsFilters.length) return this.flightsList;
    return this.flightsList.filter((item) => {
      return this.optionsFilters.every((option) => item[option]); 
    });
  }
}