vue实现评论点赞
Vue实现评论点赞功能
评论点赞功能通常涉及前端交互与后端数据同步。以下是一个基于Vue的实现方案，包含前端逻辑与模拟后端交互。
基础实现逻辑
模板部分
<template>
<div class="comment">
<p>{{ comment.content }}</p>
<button
@click="toggleLike"
:class="{ 'liked': comment.isLiked }"
>
{{ comment.likes }} 点赞
</button>
</div>
</template>脚本部分
<script>
export default {
props: {
comment: {
type: Object,
required: true,
default: () => ({
id: 0,
content: '',
likes: 0,
isLiked: false
})
}
},
methods: {
toggleLike() {
this.comment.isLiked = !this.comment.isLiked
this.comment.likes += this.comment.isLiked ? 1 : -1
// 实际项目中这里应调用API
}
}
}
</script>样式部分
<style scoped>
.liked {
color: red;
font-weight: bold;
}
</style>完整组件实现
对于实际项目，通常需要以下完整实现：
组件结构
<template>
<div v-for="comment in comments" :key="comment.id" class="comment-item">
<div class="comment-content">{{ comment.text }}</div>
<div class="comment-actions">
<button
@click="handleLike(comment.id)"
:class="{ 'active': comment.liked }"
>
<span>{{ comment.likes }}</span>
</button>
</div>
</div>
</template>组件逻辑
<script>
import { likeComment } from '@/api/comments'
export default {
data() {
return {
comments: [
{
id: 1,
text: '示例评论',
likes: 10,
liked: false
}
]
}
},
methods: {
async handleLike(commentId) {
try {
const comment = this.comments.find(c => c.id === commentId)
const action = comment.liked ? 'unlike' : 'like'
await likeComment(commentId, action)
comment.likes += comment.liked ? -1 : 1
comment.liked = !comment.liked
} catch (error) {
console.error('点赞操作失败', error)
}
}
}
}
</script>后端API交互
实际项目中需要与后端API交互：
API服务层
// api/comments.js
import axios from 'axios'
export const likeComment = (commentId, action) => {
return axios.post(`/comments/${commentId}/${action}`)
}高级功能实现
对于需要更复杂功能的场景：
防抖处理
import { debounce } from 'lodash'
methods: {
handleLike: debounce(async function(commentId) {
// 原有逻辑
}, 500)
}状态管理(Vuex)
// store/modules/comments.js
const actions = {
async likeComment({ commit }, { commentId, action }) {
const res = await likeComment(commentId, action)
commit('UPDATE_COMMENT', res.data)
}
}注意事项
- 点赞状态需要与后端保持同步
- 对于高并发场景考虑使用乐观更新策略
- 移动端需要考虑点击延迟问题
- 用户认证状态下才能执行点赞操作
- 防止重复提交和频繁点击
以上实现可以根据实际项目需求进行调整，核心在于维护前端状态与后端数据的同步。
