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

Question

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

我想要的行为是：用户向下滚动页面，单击完成按钮，后端将新更新的数据发送到前端，使 v-bind 为 true，从而导致应用 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不起作用，并将用户跳转到页面顶部。

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

感谢您的任何帮助！

Answer 1

要在保留状态的同时更新您的应用程序：

 Inertia.get('posts', params, {
              preserveState: true,
             })