filter v-for对mysql连接查询结果的过滤

qvtsj1bj  于 2021-06-17  发布在  Mysql
关注(0)|答案(1)|浏览(282)

我正在nuxt.js中构建一个项目,它使用一个使用mysql数据库的expressapi。我在项目中有一个博客,并为每个博客帖子设置评论,可以对每个评论进行回复。每条评论可以有很多回复。
我为这两个“comments”和“replys”设置了两个数据库表,其中“replys”与“comments”id具有comment\u id外键关系。我使用如下连接查询数据库: SELECT * FROM comments LEFT JOIN replys ON comments.id = replys.comment_id; 返回如下响应:

+----+---------+---------+-------------------------------+---------------------+----+------------+---------------+---------------+---------------------+
| id | post_id | user_id | content                       | created_at          | id | comment_id | reply_user_id | reply_content | reply_created_at    |
+----+---------+---------+-------------------------------+---------------------+----+------------+---------------+---------------+---------------------+
|  1 |       1 |       1 | Well thats a very lovely post | 2018-11-24 19:29:05 |  1 |          1 |             2 | it is indeed  | 2018-11-25 15:11:20 |
|  1 |       1 |       1 | Well thats a very lovely post | 2018-11-24 19:29:05 |  2 |          1 |             1 | why thanks    | 2018-11-25 15:11:39 |
+----+---------+---------+-------------------------------+---------------------+----+------------+---------------+---------------+---------------------+

所以它得到了我需要的所有数据,我现在只需要使用它。我要做的是使用v-for来遍历数据,但不包含重复的“内容”,因此类似于:

<div v-for="comment in comments" :key="comment.reply_content">
  <p>{{comment.content}}</p>
  <p>{{comment.reply_content}}</p>
</div>

当然,这会显示每个回复的comment.content。所以我想把它限制为唯一的comment.content,同时仍然显示所有的回复。我试过查看javascript函数,比如.map()和.join(),但没有找到方法。
经过大量的绞尽脑汁,我目前正在做两个查询,以获得我需要的,但我认为必须有一种方法来使用查询,我必须做我需要的。

quhf5bfb

quhf5bfb1#

也许可以将计算属性与数组方法一起使用 reduce 排序您的评论。。

computed: {
  sortedComments() {
    return this.comments.reduce((cum, next) => {
      const lastCommentArray = cum[cum.length - 1]
      if (cum.length == 0 ||
          next.content != lastCommentArray[lastCommentArray.length - 1].content) {
        cum.push([])
      }
      cum[cum.length - 1].push(next)
      return cum
    }, [])
  }
}

然后你可以像这样迭代。。

<div v-for="commentArray in sortedComments" :key="commentArray[0].content">
  <p>{{commentArray[0].content}}</p>
  <p v-for="reply in commentArray" :key="reply.reply_content">{{reply.reply_content}}</p>
</div>

相关问题