2

使用 Laraver Inertia Vue

我使用带有分页帖子列表的 vue。对于每篇文章，我只从数据库中加载几列，例如标题和作者。然后我访问 url 以加载列表中所选帖子的详细信息。我这样做是使用带有延迟加载功能的访问 url。之后，我准备好在不重新加载整个页面的情况下编辑帖子。帖子更新后，我将其提交并正确保存到数据库中。之后我可以返回页面。一切都发生了，无需重新加载列表。为了能够懒惰地加载特定帖子的详细信息，我的控制器是这样的。

class PostController extends Controller
{
    public function Index($id = null)
    {
        $this->id = $id;
        return Inertia::render('Posts/Index', [
            'posts' => Post::select('id', 'title',  'created_at')
                ->addSelect([
                    'userfirstname' => User::select('firstname')->whereColumn('id', 'posts.user_id'),
                    'userlastname' => User::select('familyname')->whereColumn('id', 'posts.user_id')
                ])
                ->orderBy('created_at', 'DESC')
                ->paginate(10),

            //lazily evaluated
            'details' => function () {
                if ($this->id) {
                    $post = Post::find($this->id);
                } else {
                    $post = null;
                }
                return $post;
            },
        ]);
    }

    public function Update(Request $request)
    {
       $request->validate([
           'id'=>'required',
           'abstract'=>'required',
           //TODO :to be completed
       ]);
       $post=Post::find($request->input('id'));
       $post->abstract=$request->input('abstract');
       $post->title=$request->input('title');
       //TODO to be completed
       $post->save();
       return Redirect::back();
    }
}

我用来加载页面和详细信息的方法是：

    //visit this url to get the lazzy evaluation of post details
    if (to_visit) {
        this.$inertia
            .visit(`/posts/${to_visit}`, {
                method: "get",
                data: {},
                replace: false,
                preserveState: true,
                preserveScroll: true,
                only: ["details"],
                headers: {}
            })
            .then(to_visit => {
                console.log("fetched " + this.details.title);
            });
    }

},
updatePost(form) {
    console.log("form submitted");
    this.$inertia.visit(`/post`, {
        method: "put",
        data: form,
        replace: false,
        preserveState: true,
        preserveScroll: true,
        only: [],
        headers: {}
    });
},

只要我更新的特定帖子在第一页上就可以正常工作，但是当它在列表中的任何其他分页页面上时，帖子保存是可以的，但我不会返回分页页面但​​总是在第一页一。很高兴听到解决方案！

4

0 回答 0