此刻，这段代码正在完成我想要的一半-它正在过滤数据。不幸的是，它所做的与我尝试做的相反。
例如，当您单击复选框时，它将为过滤器阵列添加一个新的过滤器，并且仅显示包含该过滤器阵列中所有内容的卡片。因此，如果您单击“绿色”复选框，则只会显示其颜色阵列中带有“ G”的卡片。如果之后单击“黑色”，则只会显示其颜色阵列中带有“ G”和“ B”的卡片
我要寻找的行为是相反的。我想从以下页面开始：
filterOptions: [
{checked: true, value: "W", name: "White"},
{checked: true, value: "U", name: "Blue"},
{checked: true, value: "B", name: "Black"},
{checked: true, value: "R", name: "Red"},
{checked: true, value: "G", name: "Green"},
{checked: true, value: "KLD", name: "Kaladesh"},
]
我希望这种行为显示所有卡片。一旦选中该复选框，并且“已选中”变为假，它将过滤掉包含该数据的卡片。
我认为需要修改的功能是：
if (this.selectedFilters.length > 0) {
filteredDataByFilters = Object.values(this.filteredData).filter(obj =>
this.selectedFilters.every(val => obj.colors.indexOf(val) >= 0));
this.filteredData = filteredDataByFilters;
}
下面是一个片段，显示了我当前正在使用的内容。
const cards = [
{
"Sluiceway Scorpion": {
"colorIdentity": [
"B",
"G"
],
"colors": [
"B",
"G"
],
"convertedManaCost": 4.0,
"isReserved": false,
"layout": "normal",
"legalities": {
"1v1": "Legal",
"commander": "Legal",
"duel": "Legal",
"legacy": "Legal",
"modern": "Legal",
"pauper": "Legal",
"penny": "Legal",
"vintage": "Legal"
},
"manaCost": "{2}{B}{G}",
"name": "Sluiceway Scorpion",
"power": "2",
"printings": [
"RTR"
],
"rulings": [
{
"date": "2013-04-15",
"text": "Exiling the creature card with scavenge is part of the cost of activating the scavenge ability. Once the ability is activated and the cost is paid, it’s too late to stop the ability from being activated by trying to remove the creature card from the graveyard."
}
],
"subtypes": [
"Scorpion"
],
"supertypes": [],
"text": "Deathtouch (Any amount of damage this deals to a creature is enough to destroy it.)\nScavenge {1}{B}{G} ({1}{B}{G}, Exile this card from your graveyard: Put a number of +1/+1 counters equal to this card's power on target creature. Scavenge only as a sorcery.)",
"toughness": "2",
"type": "Creature — Scorpion",
"types": [
"Creature"
],
"uuid": "7b6dbadf-a6f7-4876-9c3f-44e4a33b2bee"
},
"Tezzeret the Seeker": {
"colorIdentity": [
"U"
],
"colors": [
"U"
],
"convertedManaCost": 5.0,
"isReserved": false,
"layout": "normal",
"legalities": {
"1v1": "Legal",
"commander": "Legal",
"duel": "Legal",
"legacy": "Legal",
"modern": "Legal",
"vintage": "Legal"
},
"loyalty": "4",
"manaCost": "{3}{U}{U}",
"name": "Tezzeret the Seeker",
"printings": [
"ALA",
"DDF",
"MM2"
],
"rulings": [{
"date": "2008-10-01",
"text": "The first ability can target zero, one, or two artifacts. You may activate it with no targets just to put a loyalty counter on Tezzeret."
},
{
"date": "2008-10-01",
"text": "For the second ability, you choose the value of X when you activate it. You don’t look through your library until the ability resolves. (In other words, you can’t look through your library, decide what artifact card you want, and then determine what X is.) You can’t choose an X that’s greater than the number of loyalty counters on Tezzeret."
},
{
"date": "2008-10-01",
"text": "The third ability affects all artifacts you control, including artifacts that are already creatures."
},
{
"date": "2008-10-01",
"text": "The third ability causes artifacts you control to become creatures in addition to their other card types."
},
{
"date": "2009-10-01",
"text": "A noncreature permanent that turns into a creature is subject to the “summoning sickness” rule: It can only attack, and its {T} abilities can only be activated, if its controller has continuously controlled that permanent since the beginning of their most recent turn."
},
{
"date": "2009-10-01",
"text": "The effect from the ability overwrites other effects that set power and/or toughness if and only if those effects existed before the ability resolved. It will not overwrite effects that modify power or toughness (whether from a static ability, counters, or a resolved spell or ability), nor will it overwrite effects that set power and toughness which come into existence after the ability resolves. Effects that switch the creature’s power and toughness are always applied after any other power or toughness changing effects, including this one, regardless of the order in which they are created."
}
],
"starter": true,
"subtypes": [
"Tezzeret"
],
"supertypes": [
"Legendary"
],
"text": "+1: Untap up to two target artifacts.\n−X: Search your library for an artifact card with converted mana cost X or less and put it onto the battlefield. Then shuffle your library.\n−5: Artifacts you control become artifact creatures with base power and toughness 5/5 until end of turn.",
"type": "Legendary Planeswalker — Tezzeret",
"types": [
"Planeswalker"
],
"uuid": "e5250db5-6dfc-46ef-a6f7-198a3e0594cc"
},
}
];
new Vue({
el: '#app',
computed: {
selectedFilters: function() {
let filters = [];
let checkedFilters = this.filterOptions.filter(obj => obj.checked);
checkedFilters.forEach(element => {
filters.push(element.value);
});
return filters;
}
},
data: function() {
return {
filteredData: [],
search: "",
filterOptions: [
{checked: false, value: "W", name: "White"},
{checked: false, value: "U", name: "Blue"},
{checked: false, value: "B", name: "Black"},
{checked: false, value: "R", name: "Red"},
{checked: false, value: "G", name: "Green"},
{checked: false, value: "KLD", name: "Kaladesh"},
]
}
},
methods: {
getFilteredData: function(){
this.filteredData = cards[0];
let filteredDataByFilters = [];
let filteredDataBySearch = [];
if (this.selectedFilters.length > 0) {
filteredDataByFilters = Object.values(this.filteredData).filter(obj =>
this.selectedFilters.every(val => obj.colors.indexOf(val) >= 0)
);
this.filteredData = filteredDataByFilters;
}
// set filters
// if (this.selectedFilters.length > 0) {
// filteredDataByFilters = Object.values(this.filteredData).filter(obj =>
// this.selectedFilters.every(val => obj.printings.indexOf(val) >= 0)
// );
// this.filteredData = filteredDataByFilters;
// }
if (this.search !== "") {
filteredDataBySearch = Object.values(this.filteredData).filter(obj =>
obj.name.toLowerCase().indexOf(this.search.toLowerCase()) >= 0);
this.filteredData = filteredDataBySearch;
}
}
},
mounted() {
this.getFilteredData();
}
});<script src="https://unpkg.com/vue"></script>
<div id="app">
<div class="container-fluid">
<div class="search-wrapper">
<!-- the search bar form -->
<form v-on:submit="getFilteredData">
<div class="form-row">
<div class="col-10">
<input
type="text"
class="form-control"
placeholder="Enter key word ..."
v-model="search"
v-on:keyup="getFilteredData"
>
</div>
<div class="col-2">
<button type="submit" class="btn btn-primary">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
<!-- check boxes -->
<div id="checkboxes">
<div v-for="(filter, index) in filterOptions" :key="index" class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
v-model="filter.checked"
v-on:change="getFilteredData"
>
<label class="form-check-label">{{ filter.name }}</label>
</div>
</div>
</div>
<!-- end of checkboxes -->
<div class="cards-go-here">
<div v-for="(card, index) in filteredData" :key="index">{{card.name}}</div>
</div>
</div>
</div>