vue实现发布评论

Vue 实现发布评论功能

数据绑定与表单处理

在 Vue 中实现评论发布功能，首先需要绑定表单数据。通过 v-model 实现双向绑定，将输入框内容与 Vue 实例中的数据属性关联。

<template>
  <div>
    <textarea v-model="commentContent" placeholder="请输入评论内容"></textarea>
    <button @click="submitComment">发布评论</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentContent: ''
    }
  },
  methods: {
    submitComment() {
      if (!this.commentContent.trim()) {
        alert('评论内容不能为空');
        return;
      }
      // 调用API或处理评论数据
      console.log('发布评论:', this.commentContent);
      this.commentContent = ''; // 清空输入框
    }
  }
}
</script>

评论列表渲染

发布评论后通常需要展示评论列表。可以使用 v-for 指令动态渲染评论数据。

<template>
  <div>
    <!-- 评论表单 -->
    <textarea v-model="commentContent"></textarea>
    <button @click="submitComment">发布</button>

    <!-- 评论列表 -->
    <div v-for="(comment, index) in comments" :key="index">
      <p>{{ comment.content }}</p>
      <small>{{ comment.time }}</small>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentContent: '',
      comments: []
    }
  },
  methods: {
    submitComment() {
      if (!this.commentContent.trim()) return;

      const newComment = {
        content: this.commentContent,
        time: new Date().toLocaleString()
      };

      this.comments.unshift(newComment); // 添加到数组开头
      this.commentContent = '';
    }
  }
}
</script>

持久化存储

实际项目中通常需要将评论数据保存到后端服务器。可以使用 Axios 发送 HTTP 请求。

methods: {
  async submitComment() {
    try {
      const response = await axios.post('/api/comments', {
        content: this.commentContent
      });
      this.comments.unshift(response.data);
      this.commentContent = '';
    } catch (error) {
      console.error('发布评论失败:', error);
    }
  },
  async fetchComments() {
    try {
      const response = await axios.get('/api/comments');
      this.comments = response.data;
    } catch (error) {
      console.error('获取评论失败:', error);
    }
  }
},
created() {
  this.fetchComments();
}

表单验证增强

可以添加更完善的表单验证逻辑，比如限制评论长度。

submitComment() {
  if (this.commentContent.length > 500) {
    alert('评论不能超过500字');
    return;
  }
  // 其他提交逻辑
}

用户体验优化

添加加载状态和错误提示可以提升用户体验。

<button @click="submitComment" :disabled="isSubmitting">
  {{ isSubmitting ? '发布中...' : '发布' }}
</button>
<p v-if="error" class="error">{{ error }}</p>

<script>
data() {
  return {
    isSubmitting: false,
    error: null
  }
},
methods: {
  async submitComment() {
    this.isSubmitting = true;
    this.error = null;

    try {
      // 提交逻辑
    } catch (err) {
      this.error = '发布失败，请重试';
    } finally {
      this.isSubmitting = false;
    }
  }
}
</script>