how to nested loop and array in vue js?

问题

Result of my query from controller

date: {2020-09-24: {work_hours: 7}, 2020-09-30: {work_hours: 8}}
2020-09-24: {work_hours: 7}
2020-09-30: {work_hours: 8}

This is my vue I'm trying to nested for loop but I'm getting double the result of looping

<table class="table table-hover table-bordered table-sm" >
  <thead>
      <tr>
        <template  v-for="disp in iDate.slice(1)">           
          <th scope="col" v-if="toWordDay(disp.date) == 'Sunday'" style="color:red">{{disp.date | forThDate}}</th>
          <th scope="col" v-else>{{disp.date | forThDate}}</th>
        </template>                           
      </tr>
  </thead>
  <tbody>
    <template v-for="fetch in attendanceData">
      <tr>
        <template v-for="disp in iDate.slice(1)">                
          <td style="height:10px;"  v-for="(data,ind) in fetch.date" v-if="ind == disp.date" >{{data.work_hours}}</td>  
          <td style="height:10px;" v-else>0</td>                          
        </template>                                  
      </tr>
    </template>

  </tbody>
</table>

回答1:

Without knowing what attendanceData or iDate, I'm assuming fetch.date is what you mean the Result of my query from the controller, which is an object with the dates as keys. You could use disp.date as the accessor key.

<table class="table table-hover table-bordered table-sm" >
  <thead>
      <tr>
        <template  v-for="disp in iDate.slice(1)">           
          <th scope="col" v-if="toWordDay(disp.date) == 'Sunday'" style="color:red">{{disp.date | forThDate}}</th>
          <th scope="col" v-else>{{disp.date | forThDate}}</th>
        </template>                           
      </tr>
  </thead>
  <tbody>
    <template v-for="fetch in attendanceData">
      <tr>
        <template v-for="disp in iDate.slice(1)">                
          <td style="height:10px;">
             <template v-if="fetch.date[disp.date]">
               {{fetch.date[disp.date].work_hours || 0}}
             </template> 
             <template v-else>0</template>
          </td>
        </template>                                  
      </tr>
    </template>

  </tbody>
</table>

来源：https://stackoverflow.com/questions/64056909/how-to-nested-loop-and-array-in-vue-js