Vue中v-for循环内无法用计算属性分组created_at的解决方案咨询

你当前的思路有两个关键问题：一是_.groupBy的目标错了——你要分组的是parent下childs的created_at，但直接对parents数组按created_at分组的话，parent本身并没有这个字段；二是没把分组逻辑和chunk逻辑结合起来，导致v-for里没法正确遍历嵌套结构。

我给你调整一下计算属性的逻辑，把分组和chunk整合在一起，这样模板里就能顺畅使用了：

修正后的计算属性 #

computed: {
  chunkedParentsWithGroupedChilds() {
    // 第一步：给每个parent处理它的childs分组
    const processedParents = this.parents.map(parent => ({
      ...parent, // 保留parent原有的所有属性
      // 把当前parent的childs按created_at分组
      groupedChilds: _.groupBy(parent.childs, 'created_at')
    }));
    
    // 第二步：把处理后的parent数组分成每组3个，满足每行展示3个的需求
    return _.chunk(processedParents, 3);
  }
}

模板里的v-for用法 #

这样你就能在模板里逐层遍历，完全适配你的展示需求：

<template>
  <!-- 遍历每一行的parent组（每组3个） -->
  <div v-for="(parentRow, rowIndex) in chunkedParentsWithGroupedChilds" :key="rowIndex" class="parent-row">
    <!-- 遍历当前行的单个parent -->
    <div v-for="parent in parentRow" :key="parent.id" class="parent-card">
      <h4>Parent ID: {{ parent.id }}</h4>
      
      <!-- 遍历该parent下按日期分组的childs -->
      <div v-for="(childList, date) in parent.groupedChilds" :key="date" class="child-group">
        <p>日期：{{ date }}</p>
        <ul>
          <li v-for="child in childList" :key="child.id">
            Child ID: {{ child.id }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

额外注意事项 #

• 确保你已经正确引入了Lodash（比如在项目里通过import _ from 'lodash'或者全局挂载）；
• 如果你的created_at是Date对象而不是字符串，记得先把它转成统一的日期字符串（比如YYYY-MM-DD），不然分组会因为时间部分的差异出错；
• 模板里的key尽量用唯一标识（比如parent.id、child.id），比用index更稳定。

内容的提问来源于stack exchange，提问作者jp.palubs