Laravel8与Vue.js项目评论多次重复保存、需点击两次才生效如何解决？

• 你的openWriteComment、saveComment方法逻辑错误：每次点击按钮触发对应方法时，没有直接执行模态框打开、评论提交的逻辑，反而通过jQuery的on方法给按钮新增一次点击事件监听器。每触发一次方法就叠加一个监听器，后续点击按钮会同时触发所有已绑定的监听器，因此提交请求的次数逐次递增。
• 首次点击无响应的原因：第一次点击保存按钮时，仅执行saveComment方法绑定了第一个监听器，不会立即执行提交逻辑，需要第二次点击才会触发已绑定的监听器执行提交操作，完全匹配你反馈的故障表现。

前端Vue代码修改 #

1. 先在data中新增提交锁状态，防止手速快导致重复提交：

data() {
  return {
    comments: [],
    comment: "",
    isSubmitting: false // 新增提交锁
  };
}

2. 修改openWriteComment方法，删除事件绑定逻辑，直接执行模态框打开操作：

openWriteComment() {
  $("#modalBox0").modal("show");
}

3. 修改saveComment方法，删除事件绑定逻辑，直接执行提交请求，同步使用提交锁限制重复触发：

saveComment() {
  // 提交中直接拦截
  if (this.isSubmitting) return
  this.isSubmitting = true
  axios.post("/commentSave/" + this.post.id, {
    // 已绑定v-model直接用响应式变量，无需查询DOM
    comment: this.comment
  }).then((res) => {
    this.getComments();
    this.comment = "";
    $("#modalBox0").modal("hide");
  }).catch((err) => {
    console.log(err);
  }).finally(() => {
    // 无论成功失败都释放锁
    this.isSubmitting = false
  })
}

4. 可选优化：给保存按钮增加禁用状态和加载提示，提升交互体验：

<button @click="saveComment()" class="btn btn-primary" id="saveBtn" :disabled="isSubmitting">
  {{ isSubmitting ? '提交中...' : 'Save changes' }}
</button>

后端可选优化（双重防重复） #

可在评论存储接口增加幂等校验，拦截短时间内同一用户提交的相同内容评论，避免前端异常场景下的重复提交：

public function store(Request $request, $post)
{
    $request->validate(['comment' => 'required']);
    // 校验10秒内同用户同文章是否提交过相同内容的评论
    $exist = Comment::where('user_id', Auth::id())
        ->where('post_id', $post)
        ->where('comment', $request->comment)
        ->where('created_at', '>=', now()->subSeconds(10))
        ->exists();
    if ($exist) {
        return response()->json(['msg' => '请勿重复提交评论'], 400);
    }

    $comments = new Comment();
    $comments->comment = $request->comment;
    $comments->user_id = Auth::user()->id;
    $comments->post_id = $post;
    $comments->save();
    return $comments;
}

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