当前位置：首页 > VUE

vue实现评论点赞

2026-01-22 10:54:14VUE

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)
  }
}