How to show certain data from objects object?

Question

JavaScript

There is an array of objects:

db_en.json

[
    {
        "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"
            }
        ]
    }
]

I output the data like this:

<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;
        });
    }
  },
});

How to show objects from ArmorProtective_Head and ArmorProtective_LowerBody by clicking on the Filter 1 and Filter 2 links, respectively?

Answer 1

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">
  ...