Question

我正在创建一个按钮来过滤用户购买或在我的代码中拥有的那些数据（游戏），但是它仅过滤没有设置布尔属性的数据。

编辑：添加了有关带有Firebase数据的代码的更多详细信息

    <!-- This is the button I'm having trouble with -->
    <v-tooltip right>
      <v-btn small flat color="grey" @click="toggleHave(true)" slot="activator">
        <v-icon left small>title</v-icon>
         <span class="caption text-lowercase">by All titles bought</span>
      </v-btn>
         <span>Sort by Game's Title that I have</span>
    </v-tooltip>
</v-flex>

<!-- filterGames is for the search method -->
<v-layout row wrap>
  <v-card v-for="game in filterGames" :key="game.id" class="ma-2" width="240px">
    <router-link :to="{ name: 'view-game', params: { game_id: game.game_id }}">
      <v-img :src="game.cover" :alt="game.name" />
     </router-link>

   <v-card-title>
     <div>
      <span class="subheading">{{ game.title }}</span><br>
      <span class="caption grey--text">{{ game.platform }}</span><br>
     </div>
   </v-card-title>
 </v-card>
</v-layout>

export default {
  data() {
    return {
      games: [], //this is connected to firebase
      search: '',
    }
  },
  toggleHave(bought) {
      console.log(bought)
      this.games = this.games.filter(game => {
        return game.have === bought.have
      })
    },
  computed: {
    filterGames() {
      return this.games.filter((game) => {
        return game.title.toLowerCase().match(this.search)
      })
    }
  }
}

// with true
game_id: "006"
title: "Far Cry 4"
have: true // this is the boolean

// with false
game_id: "051"
title: "Assassin's Creed Unity"
have: false // this is the boolean

Answer 1

您正在调用toggleHave(true)，但是在您的toggleHave函数中使用的是实参，因为它是一个对象：

game.have === bought.have

这意味着您将game.have与undefined进行了比较，这解释了当前的行为。

将bought.have替换为bought，它应该可以工作。

Answer 2

您的问题更多的是JavaScript问题，而不是vue问题。 filter函数返回满足您条件的元素数组，请参见here 如果您希望在过滤时收到布尔值，请尝试使用here

之类的includes方法

Answer 3

查看此Filter list with Vue.js 只是改变

return this.games.filter(game => {
        return game.have == bought
      })

如何在VueJS中使用布尔值（True或False）过滤数据？

3 个答案: