根据 mysql 连接查询的结果过滤 v-for

Question

我正在 Nuxt.js 中构建一个项目，该项目使用 mysql 数据库的 express API。我在项目中有一个博客，正在为每个博客 post 设置评论，可以对每个评论进行回复。每个评论可以有多个回复。

我已经为此设置了两个数据库表，'comments' 和 'replys'，其中 'replys' 与 'comments' id 具有 comment_id 外键关系。我使用这样的连接查询数据库：

SELECT * FROM comments LEFT JOIN replys ON comments.id = replys.comment_id;

其中 returns 这样的回复：

+----+---------+---------+-------------------------------+---------------------+----+------------+---------------+---------------+---------------------+
| 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 遍历数据但没有重复的 'content'，所以类似于：

<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() 但还没有找到方法。

经过大量的摸索之后，我目前正在做两个查询来获得我需要的东西，但我认为必须有一种方法来使用我必须做我需要的查询。

Answer 1

也许您可以使用带有数组方法 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>

根据 mysql 连接查询的结果过滤 v-for

Filter v-for on results of mysql join query

javascript

mysql

express

vue.js

nuxt.js