Vue and Element Component

I have a complex object, for brevity the object is structured in this manner:

{
     Sample: [{
      Model: {
          Id: "1"
      },

      Collection: [{
          Id: "1"
      }]    
     }]
}

The data table renders the model data fine. But, when trying to access the collection, the table doesn't output the data.

<template>
     <el-table :data="Sample" highlight-current-row :row-class-name="tableRow" stripe :default-sort="{ prop: 'Sample.Id, order: 'descending'}">
          <el-table-column type="expand">
               <el-row :gutter="20" v-for="property in Collection">
                    <el-col :span="24"><div>Id: {{ property.Id }}</div></el-col>
               </el-row>
          </el-table-column>
          <el-table-column prop="Model.Id" label="Id" width="300"></el-table-column>
     </el-table>
</template>

Does the data being binded to the table ignore the loop? I'm able to access during the binding as a prop, the data is being sent over, but when the loop is added, the data doesn't output.

Element-io Vue

I know why the loop is not work, because Collection is in the Sample. Your data structure is a Sample array, it contains an object.

So, you can fix the code to this:

v-for="(property,index) in Sample[0].Collection"