如何在vue js中嵌套循环和数组？

Question

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>

Answer 1

不知道 attendanceData 或 iDate 是什么，我假设 fetch.date 就是您所说的 Result of my query from the controller，它是一个以日期作为键的对象。您可以使用 disp.date 作为访问密钥。

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

如何在vue js中嵌套循环和数组？

how to nested loop and array in vue js?

javascript

vue.js

v-for