Web前端学习之Vue框架下如何在一行内实现嵌套Json数据的分行展示？

刚刚开始从安卓转到Web前端，开始学习一些和前端框架相关的知识，下面是在嵌套的Json数据中分开单行显示。

得到的Json数据：

"data": {
"user_list": [
      {
        "id": 199,
        "real_name": "龙文杰",
        "auth_list": [
          {
            "resource_key": "admin2",
             "game_names": "九江",
              "status_name": "超级管理员"
          },
          {
            "resource_key": "admin2",
             "game_names": "上饶",
             "status_name": "管理员"
          }
        ]
        }

可以看到要获取的数据在data->user_list->auth_list的嵌套中，分别得到各类属性resource_key、game_names、status_name的值，很难直接得到，下面我提供一种方法：

<ul>
          <li v-for="(val, index) in scope.row.auth_list" :key="'auth_'+ index" style="margin-top:12px" >
           {{val.resource_key +'-'}}
            {{val.game_names+'-'}}
            {{val.status_name}}
            <el-button size="mini" type="primary" style="float:right;margin-right:50px;" >编辑</el-button>
            <el-button size="mini" type="danger" style="float:right;margin-right:1px;">删除</el-button>
          </li>
        </ul>

先用正常的 v-for=”(val, index) in scope.row.auth_list”得到auth_list的值 val 然后运用

{{val.resource_key +'-'}}
{{val.game_names+'-'}}
{{val.status_name}}

分别得到resource_key、game_names、status_name三者的值，就可以每行显示了。效果如下：

这样在单独的一行中又增加了几小行。