NooBiToo
@NooBiToo

Как построить таблицу на основе вложенных данных в один цикл?

Есть объект

{
  "ammo": [
    {
      "caliber": "11,43x23",
      "items": [
        {
          "name": ".45 FMJ",
          "caliber": "11,43x23",
          "damage": "72",
          "arm_pentra": "19",
          "arm_damage": "36%",
          "bullet_frag": "1%",
          "speed": "285",
          "ricochet": "7%"
        },
        {
          "name": ".45 RIP",
          "caliber": "11,43x23",
          "damage": "72",
          "arm_pentra": "19",
          "arm_damage": "36%",
          "bullet_frag": "1%",
          "speed": "285",
          "ricochet": "7%"
        }
      ]
    },
    {
      "caliber": "12,7x108",
      "items": [
        {
          "name": "12.7Б3T",
          "caliber": "12,7x108",
          "damage": "199",
          "arm_pentra": "80",
          "arm_damage": "95%",
          "bullet_frag": "17%",
          "speed": "818",
          "ricochet": "38%"
        },
        {
          "name": "Б-32",
          "caliber": "12,7x108",
          "damage": "182",
          "arm_pentra": "88",
          "arm_damage": "88%",
          "bullet_frag": "17%",
          "speed": "818",
          "ricochet": "38%"
        }
      ]
    },


Чтобы получить свойства, которые находятся в items, приходиться делать два цикла, но при построении таблицы, первый цикл либо в tbody (получаю 18 элементов tbody), либо в div (div внутри tbody), само собой то и то недопустимо, получается, что это всё нужно сделать одним циклом, но я не понимаю как это сделать, какие есть варианты?

<table>
      <thead>
        <tr>
          <th scope="col">Наименование</th>
          <th scope="col">Калибр</th>
          <th scope="col">Урон</th>
          <th scope="col">Бронепробитие</th>
          <th scope="col">Повреждение брони</th>
          <th scope="col">Вероятность фрагментации</th>
          <th scope="col">Скорость (м/сек)</th>
          <th scope="col">Вероятность рикошет</th>
        </tr>
      </thead>
      <tbody>
        <div v-for="data in ammo_data" :key="data.caliber">
          <tr v-for="items in data.items" :key="items.name">
            <td data-label="Наименование">{{items.name}}</td>
            <td data-label="Калибр">{{items.caliber}}</td>
            <td data-label="Урон">{{items.damage}}</td>
            <td data-label="Бронепробитие">{{items.arm_pentra}}</td>
            <td data-label="Повреждение брони">{{items.arm_damage}}</td>
            <td data-label="Вероятность фрагментации">{{items.bullet_frag}}</td>
            <td data-label="Скорость (м/сек)">{{items.speed}}</td>
            <td data-label="Вероятность рикошет">{{items.ricochet}}</td>
          </tr>
        </div>
      </tbody>
    </table>
  • Вопрос задан
  • 293 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
18 элементов tbody <...> недопустимо

Допустимо. Спецификация не ограничивает количество элементов tbody.

div внутри tbody

Вместо div можно использовать template.

нужно сделать один циклом

Вычисляемое свойство, внутри flatMap, на выходе - одномерный массив.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы