[Vuejs]-Vue.js multiple checkbox filter

0👍

The issues is that your data source, the JSON feed, is using strings where your filtering logic is using numbers.

Basically, you’re being tripped up because includes uses the Same-value-zero equality algorithm which doesn’t coerce between types when comparing values. This means that if you populate your view’s season filter with the numbers 2017, 2018, and 2019 but the data your are filtering represents seasons as strings such as "2017", the implication is that [2017].includes("2017") evaluates to false because the 2017 !== "2017" evaluates tofalse`.

Either use the same types in your filter, as in as your data uses, as in

data() {
  return {
      games: [],
      seasons: ["2016", "2017", "2018"],
      // etc..
  };
}

or account for the discrepancy in types by converting between string and number in your filtering logic as in

computed: {
  filteredGames() {
      return this.games.filter(({ game_id, season }) => {
          const seasonNumber = Number(season);
          return (
            (this.checkedseasons.length === 0 ||
              this.checkedseasons.includes(seasonNumber)) &&
            (this.checkedgame_ids.length === 0 || this.checkedgame_ids.includes(game_id))
          );
        });
      }    
  }

Working examples:

Using the same types: https://jsfiddle.net/p5e48w9c/1/

Converting to h*m*genous types: https://jsfiddle.net/dx1usgch/1/

Leave a comment