[
{
"ArmorProtective_LowerBody": [
{
"classification": "Редкая",
"dexterityRequirement": 158,
"dropsIn": "Эпос",
"intelligenceRequirement": 361,
"itemLevel": 55,
"name": "Поножи знахаря",
"properties": {
"characterManaRegenModifier": "+30% восстановления энергии",
"characterRunSpeedModifier": "+10% скорости перемещения",
"defensiveElementalResistance": "20% сопротивление силам природы",
"defensiveProtection": "172 ед. защиты"
},
"tag": "xtagMIArmor010"
},
{
"classification": "Редкая",
"dropsIn": "Эпос",
"itemLevel": 55,
"name": "Лягушачьи поножи",
"properties": {
"characterDefensiveAbility": "+80 ед. оборонительной способности",
"characterDodgePercent": "5% шанс уклониться от атаки",
"defensiveProtection": "292 ед. защиты"
},
"strengthRequirement": 320,
"tag": "xtagMIArmor011"
}
]
},
{
"ArmorProtective_Head": [
{
"classification": "Редкая",
"dexterityRequirement": 162,
"dropsIn": "Эпос",
"intelligenceRequirement": 372,
"itemLevel": 57,
"name": "Корона ночной госпожи",
"properties": {
"characterEnergyAbsorptionPercent": "7% поглощения энергии от заклятий",
"characterManaRegenModifier": "+30% восстановления энергии",
"defensiveProtection": "176 ед. защиты",
"offensiveElementalModifier": "+15% урона силами природы"
},
"tag": "xtagMIArmor022"
},
{
"classification": "Редкая",
"dexterityRequirement": 156,
"dropsIn": "Эпос",
"intelligenceRequirement": 355,
"itemLevel": 54,
"name": "Корона Мирмигки",
"properties": {
"characterDefensiveAbility": "+60 ед. оборонительной способности",
"characterManaRegenModifier": "+30% восстановления энергии",
"defensiveLightning": "60% сопротивление молниям",
"defensiveProtection": "164 ед. защиты"
},
"tag": "xtagMIArmor023"
}
]
}
]<div id="app">
<a href="#" @click="run">click</a>
<a href="#">Фильтр 1</a>
<a href="#">Фильтр 2</a>
<div class="bd">
<div class="bd__item" v-for="head in heads">
<div class="bd__item-name">{{ head.name }}</div>
<div class="bd__item-info">
<div v-for="(value, name, index) in head.properties">{{ value }}</div>
</div>
</div>
</div>
</div>var app = new Vue({
el: '#app',
data: {
heads: []
},
methods: {
run: function() {
fetch('../json/db_ru.json')
.then((response) => {
return response.json();
})
.then((data) => {
this.heads = data.equipment;
});
}
},
});
data: () => ({
filters: [ 'ArmorProtective_LowerBody', 'ArmorProtective_Head' ],
activeFilter: null,
...
computed: {
filteredHeads() {
const f = this.activeFilter;
return f
? this.heads.flatMap(n => n[f]).filter(Boolean)
: [];
},
...<a v-for="f in filters" @click="activeFilter = f">{{ f }}</a>
...
<div v-for="head in filteredHeads">
...
