populate veutify data-table with array containing array

Question

I am very new to Vue and have been happy with the Vuetify framework for my project. However, I am unable to build a data table from an array, which I think is related to the payload. I only need to display a few values in the table, but would like them all there when I click a row.

Here is the (abbreviated) user payload:

   [
      {
          "userId":3,
          "firstName":"Sid",
          "lastName":"Vicious",
          "phoneNumber":"3132587777",    
          "devices":[
             {
                "deviceId":"1",
                "deviceType":"phone"
                "manufactureDate":null
             }
          ]
      },
      {
          "userId":4,
          "firstName":"Johnny",
          "lastName":"Rotten",
          "phoneNumber":"3132587778",    
          "devices":[
             {
                "deviceId":"2",
                "deviceType":"phone"
                "manufactureDate":null
             }
          ]
      } 
    ]

Here is the table:

<v-data-table
   :headers="headers"
   :items="users"
   :items-per-page="10"
        
   class="elevation-1 px-10 a-2"
   @click:row="handleClick">
 </v-data-table> 

...
data() {
   return {
      headers: [
          {
            text: "Last Name",
            align: "start",
            sortable: true,
            value: "lastName",
 

     },
          {
            text: "First Name",
            align: "start",
            sortable: true,
            value: "firstName",
          },    
         
          { text: "Phone", value: "phoneNumber" }
      ]
...

users = [
      {
          "userId":3,
          "firstName":"Sid",
          "lastName":"Vicious",
          "phoneNumber":"3132587777",    
          "devices":[
             {
                "deviceId":"1",
                "deviceType":"phone"
                "manufactureDate":null
             }
          ]
      },
      {
          "userId":4,
          "firstName":"Johnny",
          "lastName":"Rotten",
          "phoneNumber":"3132587778",    
          "devices":[
             {
                "deviceId":"2",
                "deviceType":"phone"
                "manufactureDate":null
             }
          ]
      } 
    ]
   }

And when I populate the users list, I get the following error:

[Vue warn]: Invalid prop: type check failed for prop "item". Expected Object, got Array

Answer 1

The solution was to iterate over the user list, and for each item, do a array.push(item)