How to use vuejs to implement comment function

How to use vuejs to implement the comment function: 1. Use the article-content component to bind an obj; 2. Implement the comment function through the commemt-content component.

The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.

How to use vuejs to implement the comment function?

Vue.js implements the article comment and reply comment functions:

I originally wanted to I used jade to render this page and the comment section using vue, but after thinking about it, I found it troublesome. In the end, I decided to use the entire vue component to complete it.
First go to the online demo: http://jsbin.com/ceqifo/1/edit?js,output

Then go to the renderings

You can comment directly. Click on other people's comments to reply to other people's comments.

html

<div id="comment">
 <article-content v-bind:article="article"></article-content>
 <commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content>
 <comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"></comment-textarea>
</div>

The data is all bound by the root component. Several events are also monitored here.

Let’s talk about a simpler one first, , the component of the text box.

Vue.component('commentTextarea',{
 template:'\
 <div class="commentBox">\
 <h3 id="发表评论">发表评论</h3>\
 <b v-if="type">你回复 {{name}}</b>\
 <textarea name="" value="请填写评论内容" v-model="commentText"></textarea>\
 <button class="btn" @click="addComment">发表</button>\
 <button class="btn" @click="canelComment">取消</button>\
 </div>&#39;,
 props: [&#39;type&#39;,&#39;name&#39;],
 data: function(){
 return {commentText:""}
 },
 methods: {
 addComment: function() {
 this.$emit("submit",this.commentText);
 this.commentText = "";
 },
 canelComment: function() {
 this.$emit("canel");
 this.commentText = "";
 }
 }
});

type means that if you click on someone else's comment, a prompt box "You reply to xxx" will be displayed. This is because there is cross-component communication and the two components are not parent-child components but are brother components. I hung up their communication. Implement communication on a property of the parent component.

The content in the text box is two-way bound with a v-model. If OK is clicked, an addComment event is triggered and the text content is passed to the parent component, which will listen for the event.

commemt-content component – ​​comment content

First determine the json format

comment: [
 {
 name: "有毒的黄同学", //评论人名字
 time: "2016-08-17", 
 content: "好,讲得非常好，good",
 reply: [ //回复评论的信息，是一个数组，如果没内容就是一个空数组
 {
 responder: "傲娇的", //评论者
 reviewers: "有毒的黄同学", //被评论者
 time: "2016-09-05",
 content: "你说得对"
 }
 }
 ]

Then look at the commemt-content component

Vue.component('commemt-content',{
 template:'\
 <div class="commentBox">\
 <h3 id="评论">评论</h3>\
 <p v-if="comment.length==0">暂无评论，我来发表第一篇评论！</p>\
 <div v-else>\
 <div class="comment" v-for="(item,index) in comment" v-bind:index="index" >\
 <b>{{item.name}}<span>{{item.time}}</span></b>\
 <p @click="changeCommenter(item.name,index)">{{item.content}}</p>\
 <div v-if="item.reply.length > 0">\
  <div class="reply" v-for="reply in item.reply">\
  <b>{{reply.responder}}  回复  {{reply.reviewers}}<span>{{reply.time}}</span></b>\
  <p @click="changeCommenter(reply.responder,index)"">{{reply.content}}</p>\
  </div>\
 </div>\
 </div>\
 </div>\
 </div>&#39;,
 props: [&#39;comment&#39;],
 methods: {
 changeCommenter: function(name,index) {
 this.$emit("change",name,index);
 }
 }
});

If there is no content, it will display "No comments yet, I will post the first comment!". If there is content, start traversing. Because you need to know the number of comments when clicking on them, each comment needs to be bound to a v-bind:index="index"

When it comes to the second comment, it is still necessary to traverse the reply array and bind the binding. Because even if the content is clicked, it is added to the bottom of the first-level comment, so I bound the two click events to the same event. It's just that the names passed in are different. The index behind them is the index of first-level comments.

The changeCommenter event triggers the change, and the parent component listens and performs the corresponding behavior.

Parent component

var comment = new Vue({
 el: "#comment",
 data: {
 commenter: "session", //评论人，这里会从session拿
 type: 0, //0为评论作者1为评论别人的评论
 oldComment: null, //久评论者的名字
 chosedIndex: -1, //被选中的评论的index
 article: {
 title: "当归泡水喝的九大功效",
 time: "2016-07-12",
 read:50,
 content: ""
 },
 comment: [] //评论内容
 },
 methods: {
 //添加评论
 addComment: function(data) {
 if(this.type == 0) {
 this.comment.push({
  name: 'session',
  time: getTime(),
  content: data,
  reply: []
 });
 //服务器端
 }else if(this.type == 1){
 this.comment[this.chosedIndex].reply.push({
  responder: 'session',
  reviewers:this.comment[this.chosedIndex].name,
  time: getTime(),
  content: data
 });
 this.type = 0;
 }
 },
 //监听到了点击了别人的评论
 changCommmer: function(name,index) {
 this.oldComment = name;
 this.chosedIndex = index;
 this.type = 1;
 },
 //监听到了取消评论
 canelCommit: function() {
 this.type = 0;
 }
 }
})

data there. . . It’s really difficult to name. . . commenter is the current login name, which will be obtained from the session; type is to see whether it is the comment author or someone else's comment; oldComment is the commenter's name (it should be the id when actually stored); chosenIndex is the clicked The index of the comments.

canelCommit is to monitor the cancel comment event. This is used if I click on someone else's comment but suddenly I want to change the comment author. So set type=0;

changCommmer monitors when someone else clicks on a comment and wants to reply to the comment. That is, type=1.

addComment is to listen to the add comment event. According to the value of type, push the corresponding array. Also remember to connect with the database here. There are two ways to transfer data. Here, it is divided into two URLs or one according to the type, which depends on the design of the table. After I design the table tomorrow, I will add an http request to complete the comment function.

It’s the end of the term. I am really afraid of failing the exam.

To add:

Since it is the first time to design the table structure of the database by myself, it is very problematic.
Update, the correct table structure should be that each comment has its own id. There is a parentId attribute that defaults to null. If it is a direct comment, the parentId value is null. If it is a reply to someone else's comment, the parentId is The id of that comment. After finally finding out each piece of data, the obj is assembled based on whether there is a parentId in it and passed to the front end. If you directly group this obj, the for loop will be 3 times, so. . . I plan to use the hash in the data structure instead of using the for loop so many times. Finish this this weekend and it will be the next article.

However, after I thought about it. If you only use hashing, you cannot sort based on time. Because the hash is inserted based on the value of id%length, there is no time to sort. If you combine this obj directly based on the array returned by querying the database, the id inserted earlier must be first, so there is a time order. This data structure problem is really not simple.

Recommended: "The latest 5 vue.js video tutorial selections"

The above is the detailed content of How to use vuejs to implement comment function. For more information, please follow other related articles on the PHP Chinese website!