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>
