Vue中v-for结合多键实现评论父子结构排序问题

要实现父评论紧跟对应子评论的排序效果，你可以通过计算属性处理评论数组，先拆分父/子评论再重组排序：

核心思路 #

1. 先筛选出所有无父级的评论（parent_id为null/0，根据你的实际数据调整）
2. 遍历每个父评论，将父评论本身和它对应的子评论按顺序拼接
3. 最终得到父评论在前、对应子评论紧跟其后的有序数组

代码实现 #

<template>
  <div class="text-white" v-for="comment in sortedComments" :key="comment.id">
    <!-- 子评论添加缩进样式 -->
    <div :class="{ 'comment-indent': comment.parent_id }">
      {{ comment.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        // 示例数据，替换成你的真实评论数组
        { id: 1, parent_id: null, content: "PARENT 1" },
        { id: 2, parent_id: null, content: "PARENT 2" },
        { id: 3, parent_id: 1, content: "CHILD OF 1" }
      ]
    };
  },
  computed: {
    sortedComments() {
      // 筛选父评论（根据你的数据调整parent_id判断条件）
      const parentComments = this.comments.filter(comment => !comment.parent_id);
      
      // 遍历父评论，拼接对应的子评论
      return parentComments.flatMap(parent => {
        // 找到当前父评论的所有子评论
        const childComments = this.comments.filter(comment => comment.parent_id === parent.id);
        // 子评论可按需排序（比如按id/创建时间）
        childComments.sort((a, b) => a.id - b.id);
        
        return [parent, ...childComments];
      });
    }
  }
};
</script>

<style scoped>
.comment-indent {
  margin-left: 1.5rem; /* 子评论缩进距离 */
}
</style>

注意事项 #

• 如果你的父评论parent_id不是null而是其他标识（比如0），修改filter的判断条件即可
• 若需要支持多级嵌套评论（子评论还有子评论），可以把拼接逻辑改成递归函数处理
• 子评论的排序规则可根据需求调整，比如按创建时间倒序等

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