Vue.js v-for循环内编辑评论异常：点击编辑全显示文本域

这问题我太熟了！你现在踩的坑是用了一个全局的editing布尔值来控制所有评论的编辑状态——所有评论的编辑区域都绑定同一个变量，只要这个变量变成true，所有评论自然都会跟着显示编辑框。下面给你一步步的修复方案：

1. 给每条评论添加独立的编辑状态属性 #

首先，你需要把全局的editing变量替换成每条评论自己的状态。在获取到评论列表后，给每条评论追加一个isEditing属性，初始值设为false：

// 假设你是从API获取评论列表的处理逻辑
this.comments = response.data.map(comment => ({
  ...comment,
  isEditing: false // 给每条评论分配独立的编辑状态
}));

2. 修改showComment方法，控制单条评论的编辑状态 #

不再操作全局的editing，而是找到点击的那条评论，单独切换它的isEditing状态。如果不想同时编辑多条评论，还可以先把所有评论的编辑状态关掉：

showComment(comment_id) {
  console.log("clicked" + comment_id);
  
  // 可选：先关闭所有评论的编辑状态，避免同时编辑多条
  this.comments.forEach(comment => {
    comment.isEditing = false;
  });
  
  // 找到目标评论，开启它的编辑状态
  const targetComment = this.comments.find(comment => comment.id === comment_id);
  if (targetComment) {
    this.commentEdited = targetComment.body; // 把当前评论内容预填到编辑框
    targetComment.isEditing = true;
  }
}

3. 更新模板中的状态判断逻辑 #

把模板里所有依赖全局editing的地方，换成当前评论的comment.isEditing：

<div>
  <i class="fas fa-pen text-action text-success mr-3" 
     @click="showComment(comment.id)" 
     v-if="user == comment.user_id" 
     v-b-tooltip.hover title="edit"></i>
  <i class="fas fa-times-circle text-danger" 
     v-b-tooltip.hover title="delete" 
     v-if="!comment.isEditing && user == comment.user_id"></i>
  <i class="fa fa-times text-action text-danger mr-3" 
     v-if="comment.isEditing" 
     @click="comment.isEditing = false" 
     v-b-tooltip.hover title="cancel editing"></i>
</div>
<div v-if="comment.isEditing">
  <textarea class="form-control" 
            v-model="commentEdited" 
            :id="comment.id" 
            :placeholder="comment.body"></textarea>
  <button class="btn btn-xs btn-success" 
          @click="editComment(comment)">save</button>
</div>

4. 完善editComment方法，提交后关闭编辑状态 #

当你调用API完成评论更新后，记得把当前评论的isEditing设为false，同时更新评论的内容：

editComment(comment) {
  // 这里写你的API提交逻辑，比如：
  // await this.$axios.put(`/comments/${comment.id}`, { body: this.commentEdited });
  
  // 提交成功后关闭编辑状态，更新评论内容
  comment.isEditing = false;
  comment.body = this.commentEdited;
}

为什么原来的方案不行？ #

你之前用的是一个全局的editing变量，所有评论的编辑区域都绑定这个变量的状态。只要这个变量变成true，所有评论的编辑区域都会被触发显示。改成每条评论独立的isEditing属性后，每个评论的状态都是相互独立的，自然只会显示你点击的那条评论的编辑框了。

内容的提问来源于stack exchange，提问作者user12311699