Vuejs2 如何将vuejs嵌套数组输出到表

我想将这个JSON数据输出到一个表中。 我不知道如何将“fields”的内容放入同一个Tr标签中

{
  "page": [
    {
      "type": "Type A",
      "fields": [
        {
          "type": "Type1",
          "code": "field1",
          "size": {
            "width": "200",
            "height":"50"
          }
        },
        {
          "type": "Type2",
          "code": "field2",
          "size": {
            "width": "250",
            "height":"50"
          }
        }
      ]
    },
    {
      "type": "Type B",
      "fields": [
              //....
      ]
    }
  ],
  "revision": "1"
}

我写了这个html

<table>
    <thead>
        <tr>
            <th>Parent-Type</th>
            <th>Child-Type</th>
            <th>code</th>
            <th>width</th>
            <th>height</th>
        </tr>
    </thead>
    <tbody id="my-tbody" v-cloak>
        <tr v-for="(item, i) in rowData">
            <td>
                {{item.type}}
            </td>
            <td v-for="(field, j) in Object.keys(item.fields)">
                {{field.code}}
            </td>
        </tr>
    </tbody>
</table>
<scprit>
(() =>{
    new Vue({
        el: "#my-tbody",
        data: {
            rowData: []
        },
        created() {
            let _self = this
            getLayout().then(function (resp) {
                _self.rowData = resp.page;
            });
        }
    });
})();
</script>

父类型
子类型
代码
宽度
高度
{{item.type}
{{field.code}
(() =>{
新Vue({
el:“我的身体”，
数据：{
行数据：[]
},
创建（）{
让_self=这个
getLayout（）。然后（函数（resp）{
_self.rowData=resp.page；
});
}
});
})();

我想为每个“页面”创建一个tr标记，为每个“字段”创建一个td标记

用单层JSON格式化并在数据中设置是否更好

---

谢谢。

试试这样：

<table>
    <thead>
        <tr>
            <th>Parent-Type</th>
            <th>Child-Type</th>
            <th>code</th>
            <th>width</th>
            <th>height</th>
        </tr>
    </thead>
    <tbody id="my-tbody" v-cloak>
        <tr v-for="item in rowData" :key="item.type">
            <td>
                {{item.type}}
            </td>
            <td v-for="field in item.fields" :key="field.code">
                {{field.code}}
            </td>
        </tr>
    </tbody>
</table>

父类型
子类型
代码
宽度
高度
{{item.type}
{{field.code}

---

请尝试以下方法：

<table>
    <thead>
        <tr>
            <th>Parent-Type</th>
            <th>Child-Type</th>
            <th>code</th>
            <th>width</th>
            <th>height</th>
        </tr>
    </thead>
    <tbody id="my-tbody" v-cloak>
        <tr v-for="item in rowData" :key="item.type">
            <td>
                {{item.type}}
            </td>
            <td v-for="field in item.fields" :key="field.code">
                {{field.code}}
            </td>
        </tr>
    </tbody>
</table>

父类型
子类型
代码
宽度
高度
{{item.type}
{{field.code}

问候