在VueJS中使用for循环在表中打印数据

问题描述

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

{
  fred: {
    foo: bar,baz: qux,fred: xzzy
  },thud: {
    foo: bar,plugh: {
    foo: bar,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

如果引用了一个好的嵌套数组/对象教程，也将不胜感激。

解决方法

也许这对您有用：

new Vue({
  el: '#app',data: {
    exampleObject: {
      "fred": {
        "foo": "bar","baz": "qux","fred": "xzzy"
      },"thud": {
        "foo": "bar","plugh": {
        "foo": "bar","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>

同一示例，但在代码笔上： https://codepen.io/fabiogarcia/pen/poyprYw

,

尝试一下：

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