在 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

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

Answer 1

也许这对你有用：

new Vue({
  el: '#app',
  data: {
    exampleObject: {
      "fred": {
        "foo": "bar",
        "baz": "qux",
        "fred": "xzzy"
      },
      "thud": {
        "foo": "bar",
        "baz": "qux",
        "fred": "xzzy"
      },
      "plugh": {
        "foo": "bar",
        "baz": "qux",
        "fred": "xzzy"
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
  <table>
    <tr v-for="(values, key) in exampleObject" v-bind:key="key">
      <th scope="row">{{ key }}</th>
      <td v-for="(val, keyCol) in values" v-if="keyCol != 'baz'" v-bind:key="keyCol">{{ val }}</td>
    </tr>
  </table>
</div>

同样的例子，但在 codepen 上： https://codepen.io/fabiogarcia/pen/poyprYw

Answer 2

试试吧：

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