วิธีใช้ v-for เพื่อเรนเดอร์ตารางโดยใช้ vue.js

ฉันมีอาร์เรย์ที่มีลักษณะดังนี้:

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

ฉันต้องการแสดงในตารางโดยใช้ 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>

น่าเสียดายที่ฉันไม่รู้วิธีวนซ้ำอาร์เรย์การขายของฉันเพื่อแสดงในการลดราคาทุกแถวของตารางในปีปัจจุบันและปีที่แล้ว


javascript vuejs2
person Greg Ostry    schedule 22.08.2018    source แหล่งที่มา
comment
โปรดดูลิงก์ต่อไปนี้ของเอกสารประกอบ vue ซึ่งอธิบายไว้อย่างชัดเจน vuejs.org/v2/guide/   -  person Amitesh Bharti    schedule 22.08.2018

คำตอบ (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}]
    ]
  } 
})

ตัวอย่าง https://jsfiddle.net/mcqwtdgr/

person Vladimir Proskurin    schedule 22.08.2018
comment
ฉันต้องการข้อมูลตารางในองค์ประกอบการขาย ไม่ใช่ปี - person Greg Ostry; 22.08.2018
comment
ฉันเปลี่ยนคำตอบ - person Vladimir Proskurin; 22.08.2018