Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use v-for to render a table using vue.js

I've an array that look like this:

sales = [
 [{'Year': 2018, 'Month': 01, 'Sale'; 512}, {'Year': 2018, 'Month': 02, 'Sale'; 1025}, ....],
 [{'Year': 2017, 'Month': 01, 'Sale'; 155}, {'Year': 2017, 'Month': 02, 'Sale'; 12}, ....]
]

i would like to show it in a table using vue:

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>2018</th>
      <th>2017</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(sale,i) in sales" :key="i">
       <th scope="row">{{ ??? }}</th> //Month
       <td>{{ ??? }}</td> //currentYear.Sale
       <td>{{ ??? }}</td> //previousYear.Sale
    </tr>
   </tbody>
</table>

unfortunately i don't know how to iterate through my sales array to show in every table row sale of the current year and the previous year.

like image 855
Greg Ostry Avatar asked Dec 07 '22 14:12

Greg Ostry


1 Answers

<div id="app">
  <table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>2018</th>
      <th>2017</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(sale,i) in sales[0]" :key="i">
       <th scope="row">{{ sale.Month  }}</th>  
       <td>{{ sale.Sale }}</td> 
       <td>{{ sales[1][i].Sale }}</td>  
    </tr>
   </tbody>
</table>
</div>

new Vue({
  el: "#app",
  data: {
    sales: [
        [{'Year': 2018, 'Month': 01, 'Sale': 512}, {'Year': 2018, 'Month': 02, 'Sale': 1025}],
            [{'Year': 2017, 'Month': 01, 'Sale': 155}, {'Year': 2017, 'Month': 02, 'Sale': 12}]
    ]
  } 
})

example https://jsfiddle.net/mcqwtdgr/

like image 136
Vladimir Proskurin Avatar answered Dec 21 '22 23:12

Vladimir Proskurin