Фильтр v-for по результатам запроса на присоединение к MySQL

Question

Я строю проект в Nuxt.js, который использует экспресс-API, используя базу данных mysql.У меня есть блог в проекте, и я настраиваю комментарии для каждого сообщения в блоге, которые могут иметь ответы на каждый комментарий.Каждый комментарий может иметь много ответов.

Я создал две таблицы базы данных для них: 'comments' и 'replys', где 'replys' имеет отношение внешнего ключа comment_id с идентификатором 'comments'.Я запрашиваю базу данных, используя соединение следующим образом:

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 для каждого из ответовона имеет.Поэтому я хочу ограничить его уникальным комментарием, пока он показывает все ответы.Я пытался просмотреть функции 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>