Inertia+Laravel+Vue实现标记帖子完成后重载数据且保留滚动位置不跳转

你遇到的问题是两个错误导致的：一是额外发起的Inertia.get请求没有携带滚动保持配置，二是存在冗余请求逻辑。以下是两种可直接落地的方案： #

方案1：使用Inertia原生重定向逻辑（最符合Inertia设计规范） #

你最初的代码逻辑已经接近可用，问题在于后续修改时额外加了多余的Inertia.get调用。Inertia提交表单后默认会自动处理后端返回的重定向，自动拉取目标路由的最新props更新到当前页面，不需要手动发起二次请求。

修改前端代码 #

移除onSuccess里的多余请求即可：

completed(id) {
   this.completedForm.put(`/endpoint/completed/${id}`, {
      preserveScroll: true
   });
},

注意事项 #

如果修改后数据还是没有同步到前端，检查你的帖子列表是否是直接使用Inertia注入的$page.props渲染：如果列表存在组件本地的data中，props更新时本地data不会自动同步，要么直接用props渲染列表，要么监听props变化更新本地data即可。 #

方案2：前端直接更新本地数据（性能最优，适合大量帖子场景） #

不需要后端重定向，也不需要重新拉取全量帖子数据，接口返回成功状态后直接修改本地列表的对应字段即可，响应速度最快。

修改后端控制器代码 #

public function markAsCompleted(Request $request)
{
    $post = Post::findOrFail($request->id);
    $post->update(['completed' => true]);
    return response()->json([
        'success' => true,
        'post_id' => $post->id
    ]);
}

修改前端代码 #

completed(id) {
   this.completedForm.put(`/endpoint/completed/${id}`, {
      preserveScroll: true,
      onSuccess: () => {
          // 匹配对应ID的帖子，直接更新状态
          const targetPost = this.posts.find(post => post.id === id);
          if (targetPost) {
              targetPost.completed = true;
          }
      },
   });
},

为什么你之前的修改滚动不生效 #

你在onSuccess中手动调用的Inertia.get('posts')没有携带preserveScroll: true配置，这个独立的get请求会默认重置页面滚动位置。如果非要保留这种二次请求的写法，给get请求加上配置即可，但完全没有必要增加这一次冗余请求：

// 不推荐，仅作原理说明
onSuccess: () => {
    Inertia.get('posts', {}, { preserveScroll: true });
}

内容的提问来源于stack exchange，提问作者vue-coder