Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.