I'm stuck with displaying this api on vue

Question

i'm starting to learn how to use API but i'm stuck, so this is the API, http://localhost:1337/handies

    {
    "id": 1,
    "name": "John Doe",
    "price": "7€/h",
    "description": "Nice guy che vuole lavorare molto e non ha paura di sporcarsi le mani",
    "created_at": "2021-05-05T07:57:29.038Z",
    "updated_at": "2021-05-05T09:16:21.476Z",
    "categories": [
        {
            "id": 2,
            "name": "Idraulico",
            "created_at": "2021-05-05T08:34:52.646Z",
            "updated_at": "2021-05-05T08:34:58.981Z"
        }
    ]
},

now if I with vue want to visualize the name i write {{handies.name}} and it work perfectly, but if i want print the categories name "idraulico" i try {{handies.categories.name}} but don't work...what's the way to display the categories name? i use vue, axios and strapi.

Thanks to all.

Answer 1

It should be {{handies.categories[0].name}} to print the name of first category.

To print them all you can use v-for directive, something like

<div v-for="category in handies.categories" :key="category.id">
   {{ category.name }}
</div>