Как разобрать массив vue с разными типами?

Question

[Olesya_v]

{
  "posts": [
    {
      "id": 1,
      "title": "someTitlePost",
      "author": "someName"
    }
  ],
  "worke": [
    {
      "area": "frontend"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

Массив разбираю так:

<ul v-for="(link, index) in links" :key="index">
        <li>
          <strong>{{ index }}</strong>
          <ul>
            <!-- v-if="link.length >
            <li v-for="el in link" >
              
              <p v-for="(prop, index) in el" >
               
                  <span>{{ index }} :</span>
                  <span >{{ prop }} </span>
              </p>
            </li>
          </ul>
        </li>
      </ul>

НО! Из-за того, что последний элемент это объект(profile), он выводится так:


Как правильно решить задачу, с минимальным количеством действий?

Comments

[Alex]

не проверял, но можно попробовать что-то в таком духе:

<p v-for="(prop, key, index) in el" >
               
                  <span>{{ index || key}} :</span>

[Olesya_v]

Alex, не, эффект тот-же

[Михаил]

Array.isArray(link) но какие же это костыли

[Olesya_v]

Михаил, ну да, проверка на массив и далее что-то со строкой делать..

[Михаил]

Olesya_v, ну да, зачем вы перебираете объект как массив? <li v-for="el in link" >

[Olesya_v]

Михаил, а что вы предлагаете ?
Надо как-то применить для одного объекта другой вариант перебора

Answer 1

[0xD34F]

с минимальным количеством действий

Ну, как скажете.

Замените v-for="el in link" на v-for="el in [].concat(link)".

Comments

[Olesya_v]

[].concat
склеили значения)), ну да , эффектно и минималистично !

[Olesya_v]

Olesya_v, не знаю, мне нравится!)
А это сильно не кашерно в данном контексте, когда приходит такой дурацкий объект? )

[0xD34F]

Olesya_v, будет лучше, если придадите данным более единообразный вид.

[Александр]

0xD34F, согласен с вами, не надо решать подобное средствами шаблона
надо сначала данные привести в надлежащий порядок, а потом подсовывать в темплейт