1

我正在使用惯性/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不起作用，将用户跳转到页面顶部。

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

感谢您的任何帮助！

4

2 回答 2

2

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

 Inertia.get('posts', params, {
              preserveState: true,
             })
于 2021-10-20T12:10:20.673 回答
1

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

于 2021-06-30T19:57:25.883 回答