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

問題是，我不能簡單地創建一個標題行表和subrows ..

我會很感激，如果有人可以幫助我這個。

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

如果你的對象是