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

Question

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

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

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

控制器：

    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');
                    },
                });
            },

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

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

感谢您的帮助！

Answer 1

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

Answer 2

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

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

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

Inertia: Reload page with updated data without modifying scroll position

inertiajs

laravel

inertial-navigation

vue.js