How to display user data correctly?

Question

Vue.js

Hello! I'm learning vue and now I decided to take on a more difficult task for myself.
Please tell me how to correctly display these data in the table. I would appreciate a detailed explanation.

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "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"
    }
  },

Answer 1

In v-for iterate through the properties of each object, something like this:

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

vue grid example