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

Question

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.

Please refer following link of vue documentation, its clearly explained vuejs.org/v2/guide/… — Amitesh Bharti
– Amitesh Bharti, Commented Aug 22, 2018 at 9:57

Vladimir Proskurin · Accepted Answer · 2018-08-22 09:29:18Z

19

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

edited Aug 22, 2018 at 9:29

answered Aug 22, 2018 at 9:18

Vladimir Proskurin

3911 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Greg Ostry Over a year ago

i need in my table data the sale element not the year.

Vladimir Proskurin Over a year ago

I changed the answer

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related