时间戳

首页 > 解决方案 > Wuxt (Nuxt/Vue) 根据父/子对 v-for 中的项目进行排序

vue.js - Wuxt (Nuxt/Vue) 根据父/子对 v-for 中的项目进行排序

问题描述

我想对从 WP 数据库获取评论的 v-for 循环中的项目进行排序，但是数据库存储具有顺序 ID 的评论，并且由于对某些评论有回复，因此它们的顺序混乱了。

我想要正确的顺序，由comment.parent 属性表示，并且顺序是子评论应该在父母之下。条件类“commentreplied”应该足以缩进 div 以使其在视觉上组合。

到目前为止，这是我的代码： 

    <div v-for="comment in commentArray" :key="comment.id" :class="{'commentreplied' : comment.parent !== 0 }" class="commentblock">
        <img :src="comment.author_avatar_urls['96']" />
        <h3>{{ comment.author_name }}</h3>
        <div class="comment-body" v-html="comment.content.rendered"></div>
    </div>

pastebin 中的评论 JSON https://pastebin.com/vpgy1btw

标签： vue.jsnuxt.js

解决方案

推荐阅读