[Vuejs]-Vue table, list with multiple arrays with sub objects

by

0👍

If you have objects like {arr1:[{name:"test11"},{age:11}],arr2:[{name:"test22"},{age:22}],arr3:[{name:"test33"},{age:33}]} try below code

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>

If your objects is different share exact object of sample of 2-3 elements of objects

Leave a comment