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

Question

[Тамерлан Годжиев]

Здравствуйте! Я изучаю vue и сейчас решил взять для себя задачу посложнее.
Расскажите пожалуйста, как правильно вывести в таблице вот эти данные. Буду благодарен за подробное объяснение.

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[e-mail]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },

Comments

[Владимир Проскурин]

Вы быть хоть написали, в каком виде должны быть эти данные, предоставили бы соответствующую таблицу. А еще лучше бы попытались сами, раз "Я изучаю vue и сейчас решил взять для себя".

Answer 1

[Владимир Мальков]

В v-for проходи по свойствам каждого объекта, примерно так:

<table>
  <tr v-for="obj in yourObjects">
    <td v-for="prop in obj">
      {{ prop }}
    </td>
  </tr>
</table>

vue grid example

Answer 2

[Lumore]

Вот