我已经创建了多个过滤器函数，每个函数都可以正确完成自己的工作，但是，我不确定如何链接它们以便它们协同工作

Question

我正在尝试创建过滤功能，该功能允许我根据几个标准从可收集的纸牌游戏中过滤卡片。我已经创建了 6 个函数，这些函数根据卡名、卡成本或卡稀有度等单一标准进行过滤。这些功能工作正常并完成其工作，但是，现在我一次只能使用其中一个。

我正在尝试做的是组合或链接这些函数，以便在返回带有卡片的最终数组之前将它们全部考虑在内。我想知道是否有任何简单的方法可以做到这一点？

现在我有这个：

<template>
<div class="cards">
<div class="cards-list">
<div class="card" v-for='card in filteredByCost' @click='specificCard(card.cardCode)'>
<div class="card-image">
<img class='responsive-image' :src='"../assets/cards/" + card.cardCode + ".png"' alt="">
</div>
</div>
</div>
</div>
</template>
<script>
import cards from '../assets/cards/set1-en_us.json'
import router from '../router'
export default {
data() {
return {
cards: cards,
search: '',
regions: ['Demacia', 'Noxus'],
cost: [7],
attack: [3, 5],
health: [4, 7],
rarity: ['Champion']
}
},
methods: {
specificCard(cardCode){
router.push({ name: 'specificCard', params: { cardCode: cardCode } })
}
},
computed: {
filteredByName(){
return this.cards.filter((card) => {
return card.name.match(this.search)
})
},
filteredByRegion(){
return this.cards.filter((card) => {
return this.regions.includes(card.region)
})
},
filteredByCost(){
return this.cards.filter((card) => {
return this.cost.includes(card.cost)
})
},
filteredByRarity(){
return this.cards.filter((card) => {
return this.rarity.includes(card.rarity)
})
},
filteredByAttack(){
return this.cards.filter((card) => {
return this.attack.includes(card.attack)
})
},
filteredByHealth(){
return this.cards.filter((card) => {
return this.health.includes(card.health)
})
},
}
}
</script> 

Answer 1

信息

1. 将所有 filter 方法放在 vue 实例上的methods属性中
2. 创建启用/禁用过滤器的方法
3. 创建一个计算属性，该属性查看此列表中的 #2 并相应地应用适当的筛选器

我的粗略例子

new Vue({
el: "#app",
data () {
return {
filterEnabler: {
search: false,
sort: false
},
formInputs: {
searchText: ''
},
entries: [
'vue',
'react',
'angular',
'svelte'
]
}
},
computed: {
filteredEntries () {
let { entries, filterEnabler } = this
entries = entries.slice(0)

if (filterEnabler.search) entries = this.searchFilter(entries)
if (filterEnabler.sort) entries = this.sortFilter(entries)

return entries
}
},
methods: {
searchFilter (entries) {
return entries.filter(entry => entry.indexOf(this.formInputs.searchText) !== -1)
},
sortFilter (entries) {
return entries.sort()
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="filters">
<div class="search-filter">
<input type="checkbox" v-model="filterEnabler.search" /> Search Filter
<div v-if="filterEnabler.search">
<input placeholder="type here" type="text" v-model="formInputs.searchText" />
</div>
</div>
<div class="sort-filter">
<input type="checkbox" v-model="filterEnabler.sort" /> Sort Filter
</div>
</div>
<ul>
<li v-for="entry in filteredEntries" :key="entry">{{entry}}</li>
</ul>
</div>

在我的示例中，您可以看到我有 2 个过滤器，search和sort- 当它们filterEnablers之一切换true时，它会将所有启用的过滤器应用于数据，然后返回一个新的、单独的数组(非常重要，尽量不要改变你的真相来源，就我而言， 那是entries(

希望这有帮助！