Vue is a very popular front-end framework. Its flexibility and ease of use make it widely used in web development. Zhihu is a very popular Q&A community with a large user base and rich content. In Zhihu, the comment function under answers is very important. In this article, we will explore how to use Vue to implement Zhihu-like answer and comment functions.
In Zhihu, users can comment under answers. Comments can form a tree structure, where each node represents a comment and there is a parent-child relationship between nodes. Users can add their own comments under each node, which will also form a tree structure. In order to facilitate users to view, Zhihu will also expand and shrink comments.
The following is a list of functions that need to be implemented in this article:
Before implementing this function, we need to design the data structure first. In Zhihu, comments are in a tree structure, and each node has the following attributes:
The following is the definition of the data structure:
interface Comment { id: string; content: string; author: string; createTime: number; children?: Comment[]; }
For each answer, we need a list of comments. Because there may be multiple answers, we need to put these comment lists into an object, so that the corresponding comment list can be obtained by the id of the answer. The following is the definition of the data structure:
interface CommentData { [answerId: string]: Comment[]; }
We need to display the comment list first. To display a tree structure, we can use recursive components. Recursive components mean that the component can call itself in its own template.
In Vue, you can use the name attribute of the component to implement recursion. Here is a simple component:
{{ comment.content }}
This component will recursively render all child nodes.
When adding a comment, we need to specify which node to add it to. Therefore, we need to add a unique identifier to each node. In this example, we use UUID to generate a unique identifier. At the same time, for the convenience of operation, we also save the ID of the answer to which it belongs in each node.
We can use Vuex to manage state. The process of adding comments is as follows:
In the component, we can use the v-model directive to bind the comment content entered by the user, and use theelement to select which node to add it to. . The following is an example of a component:
In this component, we bidirectionally bind the content entered by the user and the selected parent node id to the data of the component. At the same time, the component also receives acommentattribute. If this attribute exists, it means that the component is to be added to an existing comment; otherwise, the component is to be added to a new comment under the answer.
In thecreatedmethod of the component, we retrieve the list of child nodes of the comments to be added by the component. If the current component is to be added to an existing comment, use its child node list; otherwise, we get the comment list of the answer from the Vuex state.
In the component'saddCommentmethod, we can call Vuex's Action to add a new comment record to the server:
async addComment() { const { content, parentId } = this; const answerId = this.answerId; await this.addComment({ answerId, parentId, content }); this.$emit("added"); }
After the Action is processed, we triggeraddedevent to notify the parent component to refresh the interface.
Expanding and shrinking comments is a relatively complex function. It is necessary to record the expansion status of each node and quickly obtain the node and its child nodes. We can record the expansion status of each node in the Vuex state.
The process of expanding and shrinking comments is as follows:
For this function we need to write a recursive component. The component will decide whether to render child nodes based on whether the node is expanded. In this component, we also need to write an expand and collapse button. The following is the code of the component:
{{ comment.content }}
In this component, we use theexpandedstate in Vuex to record whether each node is expanded. In the computed component, we use this state to determine whether the current node is expanded. In the component's methods, we use Vuex's Mutation to update the expanded state.
The processing logic of the expansion state is very simple. We only need to invert the expansion state of the corresponding node in Mutation:
toggle(state, id) { state.expanded[id] = !state.expanded[id]; },
本文介绍了如何使用Vue实现仿知乎的回答评论功能，包括评论的树形结构、添加评论、展开和收缩评论。Vue的组件、状态管理和递归组件等特性，为实现该功能提供了非常便利的支持。如果您想尝试实现仿知乎的回答评论功能，本文提供了非常好的参考。
The above is the detailed content of How to implement Zhihu-like answer and comment function in Vue?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
