惯性：使用更新的数据重新加载页面而不修改滚动位置

问题描述

我正在使用 Inertia/Laravel/VueJs。我有一个包含许多帖子的页面，每个帖子都可以标记为已完成。当帖子在前端被标记为已完成时，我有一个 v-bind 来切换应应用于已完成任务的 CSS 类。

我想要的行为是：用户向下滚动页面，单击完成的按钮，后端将新更新的数据发送到前端，使 v-bind 为真，导致 CSS 类无需跳转到页面顶部即可应用。

使用下面的代码，我可以单击完成的按钮，它会在数据库中更新，但新数据不会发送到前端。

控制器：

    public function markAsCompleted(Request $request)
    {
        $post = Post::find($request->id);

        $post->completed = true;

        $post->save();

        return Redirect::route('posts');
    }

点击完成按钮时调用的Javascript函数：

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

如果我将 Javascript 函数更改为：

            completed(id) {
                this.completedForm.put(`/endpoint/completed/${id}`,{
                    preserveScroll: true,onSuccess: () => {
                        Inertia.get('posts');
                    },});
            },

在这种情况下，新数据返回到前端，帖子被标记为完成，但preserveScroll不起作用，将用户跳转到页面顶部。

关于如何让我想要的用例工作有什么想法吗？用户可能有数百个帖子，所以我不能让页面每次都跳到顶部。

感谢您的帮助！

解决方法

一种方式，不是最干净的，但它是一种解决方案。只需单击“完成按钮”向后端发送请求，仅检查响应是否成功，然后在前端更新该任务为完成。因此，您只需更新（添加类）此元素，而无需重新渲染整个 DOM。因为，如果您得到成功响应，那肯定会在后端完成。