vue.js - 在 VueJS 中使用 for 循环打印表格中的数据

Question

成功获取 API 数据后，结果如下所示：

{
  fred: {
    foo: bar,
    baz: qux,
    fred: xzzy
  },
  thud: {
    foo: bar,
    baz: qux,
    fred: xzzy
  },
  plugh: {
    foo: bar,
    baz: qux,
    fred: xzzy
  }
}

我需要将表格中的数据显示如下：

th th 
fred bar xzzy
thud bar xzzy
plugh bar xzzy

使用下面的代码，我只完成了<tr>：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<tr v-for="(values, key) in object" v-bind:key="key.id">
  <th scope="row">{{ key }}</th>
  <td v-for="(values, key) in object" v-bind:key="values.id">{{ values.last }}</td>
</tr>

打印如下：

th th 
fred bar bar bar
thud qux qux qux
plugh xzzy xzzy xzzy

如果参考一个好的嵌套数组/对象教程也将不胜感激。

标签： vue.jsvuejs2v-for

Answer 1

试试看：

<tr v-for="(valuesParent, key) in object" v-bind:key="valuesParent">
  <th scope="row">{{ key }}</th>
  <td v-for="(values, key) in valuesParent" v-bind:key="values">{{ values }}</td>
</tr>