Display nested object properties in <b-table>

Hi,
I have an array of objects gotten by api request. Its structure is something like this:

[
 {
   user_address_string: ('Street 1')
   id: (3)
   avatar: (img')
   user: {
     id: 1
     first_name: 'Lucas'
     last_name: 'Smith'
   }
},
{...},
{...}
]

It is just a sample just to show you the structure. I need to display only the properties contained in the object user. I would like to keep the structure of the table I was using before I got this new api.

<b-table
  responsive
  v-if="users && users.length > 0"
  :fields="fields"
  :items="users"
>

It should be something like this:

<template slot-scope="data">
   {{ data.item.user }}
</template> 

data.item should be the single user in the users array of objects, and with .user I should be able to access the properties of its object property user. What am I missing?

In the script I have users: [] and fields defined

fields: [
      { key: 'id', label: 'ID'},
      { key: 'name', label: 'Name' }
]

So, how should I write the template for displaying the nested object’s properties?
Thank you

I just needed to redefine the key in the fields as

{ key: 'user.first_name', label: 'First name' } 
1 Like