Vueテーブル、サブオブジェクトを含む複数の配列を持つリスト

Question

私は質問したいと思います。 ...単純にこのようなオブジェクトを持つテーブルをレンダリングするためにどういうわけか、このような

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

問題は、私は単にヘッダー行を持つテーブルを作成する傾けることです

誰かが私にこれを手伝ってもらえると感謝しています。

Answer 1

あなたがコード

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>

以下{arr1:[{name:"test11"},{age:11}],arr2:[{name:"test22"},{age:22}],arr3:[{name:"test33"},{age:33}]}試しのようなオブジェクトを持っている場合は、あなたのオブジェクトは、オブジェクト