Question

我制作了两个Vue.js多重复选框过滤器的示例：“作业”和“游戏”。

“工作”：https://jsfiddle.net/ostapenko25/cw7kyp83/
“游戏”：https://jsfiddle.net/ostapenko25/bu7hcvqg/

//“Jobs”
computed: {
 filteredJobs() {
  return this.jobs.filter(({ id, userId }) => {
    return (
      (this.checkedUserIds.length === 0 ||
        this.checkedUserIds.includes(userId)) &&
      (this.checkedIds.length === 0 || this.checkedIds.includes(id))
    );
  });
 }
}

//“Games”   
computed: {
 filteredGames() {
   return this.games.filter(({ game_id, season }) => {
     return (
       (this.checkedseasons.length === 0 ||
         this.checkedseasons.includes(season)) &&
          (this.checkedgame_ids.length === 0 || this.checkedgame_ids.includes(game_id))
        );
     });
   }    
}

除了JSON数据以及键和属性的名称外，它们完全相同。但是第一个示例有效，而第二个示例则无效：当我尝试使用复选框时，游戏列表将变为空。请帮助我找出我在“游戏”示例中的错误。

Answer 1

问题在于您的数据源（JSON提要）正在使用 strings ，而您的过滤逻辑正在使用 numbers 。

基本上，您被绊倒了，因为includes使用Same-value-zero equality算法，该算法在比较值时不会在类型之间强制转换。这意味着，如果您使用 numbers 2017，2018和2019填充视图的季节过滤器，但是要过滤的数据将季节表示为字符串（例如"2017"），这意味着[2017].includes("2017")的值为false，因为2017 !== "2017" evaluates to为假。

在过滤器中使用与在数据中使用相同的类型，在

中

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

或通过在过滤逻辑中的字符串和数字之间进行转换来解决类型差异，如

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))
          );
        });
      }    
  }

工作示例：

使用相同的类型：https://jsfiddle.net/p5e48w9c/1/

转换为同质类型：https://jsfiddle.net/dx1usgch/1/

Vue.js多个复选框过滤器

1 个答案: