vue实现评论编辑

Vue 实现评论编辑功能

数据绑定与状态管理

使用 v-model 双向绑定评论内容，通过 data 或 Vuex 管理编辑状态。例如：

data() {
  return {
    comments: [],
    editingCommentId: null,
    editedContent: ''
  }
}

编辑按钮与表单切换

为每条评论添加编辑按钮，点击时进入编辑模式并显示表单：

<div v-for="comment in comments" :key="comment.id">
  <div v-if="editingCommentId !== comment.id">
    {{ comment.content }}
    <button @click="startEditing(comment)">编辑</button>
  </div>
  <div v-else>
    <textarea v-model="editedContent"></textarea>
    <button @click="saveEdit(comment.id)">保存</button>
  </div>
</div>

编辑逻辑实现

methods: {
  startEditing(comment) {
    this.editingCommentId = comment.id
    this.editedContent = comment.content
  },
  saveEdit(commentId) {
    const index = this.comments.findIndex(c => c.id === commentId)
    this.comments[index].content = this.editedContent
    this.editingCommentId = null
  }
}

自动聚焦优化

使用 ref 和 $nextTick 实现编辑框自动聚焦：

<textarea ref="editInput" v-model="editedContent"></textarea>

startEditing(comment) {
  this.editingCommentId = comment.id
  this.editedContent = comment.content
  this.$nextTick(() => {
    this.$refs.editInput.focus()
  })
}

取消编辑功能

添加取消按钮恢复原始内容：

<button @click="cancelEdit">取消</button>

cancelEdit() {
  this.editingCommentId = null
}

后端数据同步

实际项目中需调用 API 保存修改：

async saveEdit(commentId) {
  try {
    await api.updateComment(commentId, { content: this.editedContent })
    const index = this.comments.findIndex(c => c.id === commentId)
    this.comments[index].content = this.editedContent
    this.editingCommentId = null
  } catch (error) {
    console.error('更新失败', error)
  }
}