如何在Vue的v-for循环中仅显示一次分组标题？

我明白你现在遇到的痛点：循环每个child时，符合条件的子项都会重复渲染分组标题，v-once在这里完全不起作用——这是因为v-for的每个循环项都是独立的DOM节点，每个标题都是全新的实例，所以哪怕加了v-once，该重复的还是会重复。

核心思路：先分组再渲染 #

正确的做法是先把你的children数据按parentage字段做分组处理，再基于分组后的结构渲染：每组的标题只在组的顶部渲染一次，再循环展示组内的子项。

步骤1：用计算属性完成数据分组 #

在你的Vue组件中添加一个计算属性，把扁平的children对象转换成按parentage分组的结构：

computed: {
  groupedChildren() {
    // 先把children对象转为数组（原数据是对象形式，无法直接遍历分组）
    const childrenArray = Object.values(this.children);
    
    // 用reduce方法实现分组
    return childrenArray.reduce((groups, child) => {
      const parentageKey = child.parentage;
      // 如果当前分组不存在，先初始化空数组
      if (!groups[parentageKey]) {
        groups[parentageKey] = [];
      }
      // 将当前child推入对应分组
      groups[parentageKey].push(child);
      return groups;
    }, {});
  }
}

步骤2：定义标题映射（可选但更易维护） #

为了让代码更灵活，你可以在data里定义一个标题映射，把parentage的键对应到友好的显示文本：

data() {
  return {
    children: { /* 你的原children数据 */ },
    parentageTitleMap: {
      our_child: 'Our Children',
      partners_child: "Partner's Children"
    }
  }
}

步骤3：修改模板代码 #

现在基于分组后的数据渲染，每组只显示一次标题，再循环组内的子项：

<div v-for="(childrenGroup, parentageKey) in groupedChildren" :key="parentageKey">
  <!-- 分组标题：每组仅渲染一次 -->
  <p class="text-muted text-xs font-weight-medium mb-0 kern-1">
    {{ parentageTitleMap[parentageKey] }}
  </p>
  
  <!-- 循环当前分组下的所有子项 -->
  <div v-for="child in childrenGroup" :key="child.id" class="mt-2">
    <a href="#" class="d-flex flex-row justify-content-between w-100 text-sm">
      <div>
        <strong v-text="child.name"></strong>, was born in <span v-text="child.birth_year"></span>, and <span v-text="child.gender"></span> is <span v-text="child.dependency"></span>
      </div>
      <div 
        class="d-none d-lg-block text-sm text-uppercase brand-primary-color font-weight-bold" 
        :id="child.id" 
        @click.prevent="getChildId(child.id); showMyChildForm()"
      >
        Edit
      </div>
    </a>
  </div>
</div>

额外提醒 #

• 你原来的@click.prevent里用+连接两个方法是错误写法，应该用分号;或逗号,分隔，否则会把两个方法的返回值做加法运算，而不是依次执行它们。
• 为什么之前的v-once没用？因为v-for循环的每个<div>都是独立的组件实例，每个里面的<p>标签都是新的，v-once只是让该<p>不更新，但每个子项都会生成一个，自然还是重复。而先分组再渲染，每组只生成一次标题，就从根源解决了重复问题。

内容的提问来源于stack exchange，提问作者UXCODA