Vue 表，包含多个带有子对象的数组的列表答案

【问题标题】：Vue table, list with multiple arrays with sub objectsVue 表，包含多个带有子对象的数组的列表
【发布时间】：2018-03-21 18:16:23
【问题描述】：

我想问一下。可以像这样简单地用 Object 渲染表格..

list {
  Array[1] = [
    Object[0] = {
      name: "Hello world"
    }
  ],
  Array[2] = [
    Object[0] = {
      name: "Hello world"
    },
    Object[1] = {
      name: "Hello world"
    }
  ]
}

有点像这样..

<tr v-for="(subrows, header) in list">{{ header }}</tr>
<tr v-for="subrow in subrows">{{ subrow }}<tr/>

问题是我不能简单地创建带有标题行和子行的表..

如果有人能帮我解决这个问题，我将不胜感激。

【问题讨论】：

您能否编辑您的问题，以便清楚list 中的数据项如何对应subrows 和header？

标签： php laravel vue.js vuejs2

【解决方案1】：

如果你有像{arr1:[{name:"test11"},{age:11}],arr2:[{name:"test22"},{age:22}],arr3:[{name:"test33"},{age:33}]} 这样的对象，试试下面的代码

var vm = new Vue({
  el: '#vue-instance',
  data: {
    rows:{arr1:[{name:"test11"},{age:11}],arr2:[{name:"test22"},{age:22}],arr3:[{name:"test33"},{age:33}]}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <table border="1">
    <tr><th>Data for</th><th>Name</th><th>Age</th></tr>
    <tr v-for="(index,row) in rows"><td>{{index}}</td><td>{{row[0].name}}</td><td>{{row[1].age}}</td></tr>
  </table>
</div>

如果您的对象不同，请共享对象的 2-3 个元素样本的确切对象

【讨论】：

但是我有一个列表，其中每个数组都是标题，并且在数组中每个对象都是行：/ {arr1=[{name:1},{name:2}].arr2=[{name:3 }]} 在 laravel 中它看起来像这样： forach (items as x => y) {{ $x->name }} foreach (y as subitem) {{ $subitem->.. }} endforeach endforeach跨度>
感谢帮助，但如何获取 arr1,arr2.. 作为表头和对象作为行
@nrkz : 在第一列也添加了键名
谢谢，但是可以将此键添加为新的 tr 之类的标头吗？
是的，它可能但不是一个好方法，因为arr1,arr2 是动态行而不是列。