Passing nested JSON object in Vue 3

Thubz 0
Viewed 13

I would appreciate your assistance in the following. My API returns the following results:

{
    "results": [
        {
            "id": 32,
            "partner_tracks": [
                {
                    "id": 1,
                    "track_name": "Just another test",
                    "user": 32
                },
                {
                    "id": 2,
                    "track_name": "Test 2",
                    "user": 32
                }
            ],
            "user_application": [
                {
                    "id": 1,
                    "business_stage": "Ideation",
                    "user": 32
                }
            ],
            "user_first_name": "Test ",
            "user_last_name": "User",
            "user_age": "30"
        }
    ]
}

In my Vue file, I am trying to call the user business_stage in the user_application like so:

<tr
        tabindex="0"
        v-for='user in users["results"]' :key='user["id"]'
    >
      <td class="">
        <div class="text-center">
          <p>
            {{user["user_application"]["business_stage"]}}
          </p>
        </div>
      </td>
</tr>

Please assist with the right way to have the business_stage rendered in the view.

Thank you.

pinia vuejs3
1 Answers

In case anyone faces the same kind of issue, I managed to get this working using the following indexing;

<div v-for="business_stage in user.user_application" v-bind:key="user['id']">
   <p>
    {{ business_stage["business_stage"] }}
   </p>
</div>
Thubz0
Related