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

Question

I'm using Inertia/Laravel/VueJs. I have a page with many posts and each post can be marked as completed. When a post is marked as completed on the front-end I have a v-bind which toggles a CSS class which should be applied to completed tasks.

The behaviour I would like is: a user scrolls down a page, clicks the completed button, and the back-end sends that newly updated data to the front-end, making the v-bind true, causing the CSS class to be applied without jumping to the top of the page.

With the code below I can click the completed button, and it is updated in the database, but that new data isn't sent to the front-end.

Controller:

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

        $post->completed = true;

        $post->save();

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

Javascript function called at click of completed button:

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

If I change the Javascript function to:

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

In this case, the new data is returned to the front-end with the post being marked as completed, but the preserveScroll doesn't work, and jumps the user to the top of the page.

Any ideas on how to get my desired use case working? Users could have hundreds of posts so I can't have the page jump up to the top every time.

Thank you for any help!

Answer 1

One way, not the cleanest, but it is a solution. Just click "Completed Button" to send a request to the backend, and ONLY to check if the response is success, then update that task in frontend as complete. So you just update (add class) this element and you don't rerender whole DOM. Because, if you get success response, thats done in the backend for sure.

Answer 2

To update your app while preserving the state:

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