How to make an additional filter?

Question

Vue.js

Good afternoon, there is an example https://codepen.io/djastrodeep/pen/oNwOqzE of filtering only by position, how else to filter by geo. Thanks

Answer 1

<option v-for="item in info">
  {{ item.fieldTypes.geo }}
</option>

It is not right. If the values ​​in fieldTypes.geoare not unique, the options will also be repeated. Why is this? No need. We make a computed property that represents unique values ​​and use it when creating options:

computed: {
  uniqueGeo() {
    return [...new Set(this.info.map(n => n.fieldTypes.geo))];
  },
  ...

<option v-for="n in uniqueGeo">{{ n }}</option>
In the calculated property that represents the filtered data, we add a check for the second value, rewrite it as follows:

computed: {
  filteredOffers() {
    const vacancy = this.searchVacancyName.toUpperCase();
    const geo = this.searchGeo;

    return this.info.filter(n => (
      (!vacancy || n.fieldTypes.vacancyName.toUpperCase().includes(vacancy)) &&
      (!geo || n.fieldTypes.geo === geo)
    ));
  },
  ...