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

【问题标题】：how to nested loop and array in vue js?如何在 vue js 中嵌套循环和数组？
【发布时间】：2021-01-11 08:44:04
【问题描述】：

我从控制器查询的结果

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}

这是我的 vue，我正在尝试嵌套 for 循环，但我得到了两倍循环的结果

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

【问题讨论】：

nested for 循环建议嵌套数据...但是您的内部 for 循环与外部 for 循环无关 - 如果您有“双重数据”，这意味着外部循环循环两次 - 没有看到您的数据不过，帮不上什么忙
我该怎么做？你能提供那个代码吗
这与嵌套循环无关。您将 0 放入 v-else。去掉 v-else 的 td。它应该可以工作或在该标签内保持没有任何字符
不工作它将显示7 到sep 24th 和8 到sep 2th
这并不能解释 attendanceData 或 iDate 是什么

标签： javascript vue.js v-for

【解决方案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>

【讨论】：

显示全0
PLS CHECK..这是关于这个的相同问题我的查询都在这里stackoverflow.com/questions/64041891/…
请添加更多关于attendanceData和iDate的信息
请检查更新的答案，我想我错过了disp.date
我更早解决了这个问题，但这比我做的要好.. 太棒了，谢谢 :)