如何在前端控制渲染，一次只呈现30篇

Question

环境:后端: Laravel 9，前端: VueJs 3，InertiaJs

我的预期结果是，当用户滚动到底部时，将数据呈现或传递给/在前端。然后，它触发一些东西来呈现更多的数据/post。

控制器

/**
 * Rendering the Explore page.
 *
 * @param \Illuminate\Http\Request $request
 * @return \Inertia\Response
 */
public function show(Request $request)
{
    $posts = Post::with('author')
        ->inRandomOrder()
        ->get;

    return Inertia::render('Explore/Explore', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'posts' => $posts,
    ]);
}

现在，它只呈现了数据库中的所有数据。我有一个显示更多的按钮在前面，它只出现在张贴超过20。

<div v-show="posts.length > 30"
     class="pointer-events-none absolute inset-x-0 
            bottom-0 flex justify-center pt-32 pb-8">
    <button type="button"
            class="click pointer-events-auto relative flex h-12 items-center 
            rounded-lg bg-white px-6 text-sm font-semibold 
            text-black hover:bg-gray-200">
        Show more...
    </button>
</div>

我在后端解决了这个问题，所以当“显示更多被点击”时，它会将更多的数据发送到一个路由，并将更多的数据传递给页面，但不确定如何实现这一点。任何帮助都将不胜感激。

Answer 1

您可以在前端创建axios.get，作为json发送请求和接收数据。

在后端，您将需要添加

if ($request->wantsJson()) {
            return response()->json($posts)
                ->header('Access-Control-Allow-Origin', '*')
                ->header("Access-Control-Allow-Methods", "GET");
        }

一定要记住返回CORS的头