Cara menggunakan v-for untuk merender tabel menggunakan vue.js

Saya memiliki array yang terlihat seperti ini:

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}, ....]
]

saya ingin menampilkannya dalam tabel menggunakan 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>

sayangnya saya tidak tahu cara mengulangi array penjualan saya untuk menampilkan penjualan baris tabel tahun ini dan tahun sebelumnya di setiap baris tabel.


javascript vuejs2
person Greg Ostry    schedule 22.08.2018    source sumber
comment
Silakan lihat tautan dokumentasi vue berikut, yang dijelaskan dengan jelas vuejs.org/v2/guide/   -  person Amitesh Bharti    schedule 22.08.2018

Jawaban (1)


arrow_upward
13
arrow_downward 

<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}]
    ]
  } 
})

contoh https://jsfiddle.net/mcqwtdgr/

person Vladimir Proskurin    schedule 22.08.2018
comment
saya memerlukan data tabel saya elemen penjualan bukan tahun. - person Greg Ostry; 22.08.2018
comment
Saya mengubah jawabannya - person Vladimir Proskurin; 22.08.2018