Question

我想将此JSON数据输出到表中。我不知道如何将“字段”的内容放入同一个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>

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

以单层JSON格式设置并在数据中设置更好吗？

谢谢。

Answer 1

尝试这样的事情：

<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>

致谢

如何将vue.js嵌套数组输出到表

1 个答案: