vue循环输出这个列表怎么处理哦？

Question

最好能用vue来循环，层级有点深。

{
  "records": {},
  "detail": {},
  "assignData": "0",
  "progress": {},
  "list": [
    {
      "id": "18",
      "name": "A1",
      "partlist": {
        "86500": {
          "id": "86500",
          "name": "课后练习"
        },
        "86501": {
          "id": "86501",
          "name": "课后练习1"
        },
        "86502": {
          "id": "86502",
          "name": "课后练习2"
        }
      }
    },
    {
      "id": "19",
      "name": "A2",
      "partlist": {
        "86600": {
          "id": "86600",
          "name": "课后练习"
        },
        "86601": {
          "id": "86601",
          "name": "课后练习1"
        },
        "86602": {
          "id": "86602",
          "name": "课后练习2"
        }
      }
    },
    {
      "id": "19",
      "name": "A3",
      "partlist": {
        "86700": {
          "id": "86700",
          "name": "课后练习"
        },
        "86701": {
          "id": "86701",
          "name": "课后练习1"
        },
        "86702": {
          "id": "86602",
          "name": "课后练习2"
        }
      }
    }
  ]
}

<div class="center">
    <div class="module module-border">
        <div class="module-hd">
            <h4>A1</h4>
        </div>
        <div class="module-bd">
            <ul class="md-txtlist">
                <li class="item">
                    <div class="span"><i class="icon icon-video"></i>课后练习</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
                <li class="item">
                    <div class="span"><i class="icon icon-video"></i>课后练习1</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
                <li class="item">
                    <div class="span"><i class="icon icon-voice"></i>课后练习2</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="center">
    <div class="module module-border">
        <div class="module-hd">
            <h4>A2</h4>
        </div>
        <div class="module-bd">
            <ul class="md-txtlist">
                <li class="item">
                    <div class="span"><i class="icon icon-video"></i>课后练习</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
                <li class="item">
                    <div class="span"><i class="icon icon-video"></i>课后练习1</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
                <li class="item">
                    <div class="span"><i class="icon icon-voice"></i>课后练习2</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="center">
    <div class="module module-border">
        <div class="module-hd">
            <h4>A3</h4>
        </div>
        <div class="module-bd">
            <ul class="md-txtlist">
                <li class="item">
                    <div class="span"><i class="icon icon-video"></i>课后练习</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
                <li class="item">
                    <div class="span"><i class="icon icon-video"></i>课后练习1</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
                <li class="item">
                    <div class="span"><i class="icon icon-voice"></i>课后练习2</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

# 没见过这么懒的题主

<div class="center" v-for="item in data.list">
    <div class="module module-border">
        <div class="module-hd">
            <h4>{{item.name}}</h4>
        </div>
        <div class="module-bd">
            <ul class="md-txtlist">
                <li class="item" v-for="part in item.partlist">
                    <div class="span"><i class="icon icon-voice"></i>{{part.name}}</div>
                    <div class="span"><i class="icon icon-ok"></i>已完成</div>
                </li>
            </ul>
        </div>
    </div>
</div>