Chefranov
@Chefranov
Front-End, Back-End

Как показывать определенные данные из объекта объектов?

Имеется массив объектов:
db_ru.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"
            }
        ]
    }
]

Вывожу данные так:
<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;
        });
    }
  },
});


Как по клику на ссылки Фильтр 1 и Фильтр 2 показывать объекты из ArmorProtective_Head и ArmorProtective_LowerBody соответственно?
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
data() {
  return {
    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">
  ...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
от 90 000 до 220 000 руб.
от 60 000 до 90 000 руб.
16 июл. 2019, в 00:49
15000 руб./за проект
15 июл. 2019, в 23:17
3000 руб./за проект
15 июл. 2019, в 23:03
1000 руб./за проект