How to implement article comment and reply list by vue
Today, I would like to share with you how vue realizes the relevant knowledge points of the article comment and reply list. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
Effect Preview:
Parent component:
{{item.articleDesc}} import myCycleList from'@ / components/my-cycle-list'export default {components: {myCycleList}, data () {return {/ / list of articles articleLists: [{articleId: 'article-1', articleDesc:' siege'}, {articleId: 'article-2', articleDesc:' Camel Xiangzi'} {articleId: 'article-3', articleDesc:' Border Town'}, {articleId: 'article-4', articleDesc:' picking up the evening flowers'}], / / comment list commentsList: [{userId: 'user-1', userName:' Zhao Yi', articleId: 'article-1'' / / Associated article id commentId: 'comment-1', / / comment id replyId: null, / / reply to which comment id desc:' who is the author', time: '2021-04-05 15-15-30-30-25'}, {userId: 'user-2', userName:' Qian er' ArticleId: 'article-1', commentId:' comment-2', replyId: null, desc: 'right The author also doesn't write', time: '2021-04-05 15 user-3', userName 30 user-3', userName 25'}, {userId: 'user-3', userName:' Sun San', articleId: 'article-1', commentId:' comment-3', replyId: null, desc: 'haven't you graduated from the two junior high schools upstairs? Time: '2021-04-05 15 user-4', userName 30 articleId 25'}, {userId: 'user-4', userName:' Li Si', articleId: 'article-1', commentId:' comment-4', replyId: 'comment-1', desc:' the author is Qian Zhongshu Time: '2021-04-05 15 user-9', userName 30 user-9', userName 25'}, {userId: 'Niujiu', articleId: 'article-1', commentId:' comment-10', replyId: 'comment-1', desc: Qian Zhongshu' Time: '2021-04-05 15 user-5', userName 30 articleId 25'}, {userId: 'user-5', userName:' Wang Wu', articleId: 'article-2', commentId:' comment-5', replyId: null, desc:'ha ha' Time: '2021-04-05 15 user-6', userName 30 articleId 25'}, {userId: 'user-6', userName:' Zhang Liu', articleId: 'article-1', commentId:' comment-6', replyId: 'comment-4', desc:' wrong' Time: '2021-04-05 15 articleId 30 time 25'}, {userId: 'user-7', userName:' Gu Qi', articleId: 'article-1', commentId:' comment-7', replyId: 'comment-6', desc:' that's right It is Qian Zhongshu, time: '2021-04-05 1514 30 articleId 25'}, {userId:' user-8', userName: 'Zhu Ba', articleId: 'article-3', commentId:' comment-8', replyId: null, desc: 'this is a really good book' Time: '2021-04-05 15 user-9', userName 30 articleId 25'}, {userId: 'user-9', userName:' Jijiu', articleId: 'article-4', commentId:' comment-9', replyId: null, desc: 'really pretty' Time: '2021-04-05 1515 30 this.initCommentLists 25'}, created () {this.initCommentLists () this.initArticleLists ()}, methods: {/ / format comment data initCommentLists () {this.commentsList.forEach (I = > {this.$set (I, 'children') []) / / put the list of replies to the comment in children let filterList = this.commentsList.filter (j = > j.replyId = i.commentId) if (filterList.length > 0) {i.children = filterList}}) / / filter out the highest level this.commentsList = this.commentsList.filter (I = > i.replyId = null)} / / format article data initArticleLists () {this.articleLists.forEach (I = > {this.$set (I, 'children') []) let filterList = this.commentsList.filter (j = > j.articleId = i.articleId) if (filterList.length > 0) {i.children = filterList}. Comment-reply {.article-list {margin: 15px .article-desc {color: coral; font-size: 26px; font-weight: bold;}}. Comment-list {margin: 10px; .comment {.comment-username {color: # 999; cursor: pointer;}
My-cycle-list components:
{{self.userName}} reply {{parent.userName}}: {{self.desc}} {{self.time}} {{self.userName}}: {{self.desc}} {{self.time}} {{! showAll? `View all ${self.children.length} replies`: `put away ${self.children.length} replies`}} import myCycleList from'@ / components/my-cycle-list'export default {props: ['self' 'parent'], components: {myCycleList}, name:' my-cycle-list', data () {return {flagNum: 2, / / how many folded showAll: false}}, created () {}, methods: {/ / Click the returned nickname event parentClick () {console.log (this.parent)} / / commentator clicks event commentUserNameClick () {console.log (this.self)}, / / View / close reply viewAll () {this.showAll =! this.showAll}} .my-cycle-list {.reply {margin: 10px .self-username {cursor: pointer; color: # 999;} .parent-username {color: burlywood; cursor: pointer;} .time {margin: 0 10px; color: # 666; font-size: 12px;} .view-all {margin: 10px 0; color: darkcyan; cursor: pointer } the above is all the content of the article "how to implement the vue comment and reply list". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
