如何控制前端渲染，一次只渲染30post

Question

环境：后端：Laravel 9，前端：VueJs 3、InertiaJs

我的预期结果是在用户滚动到底部时呈现或传递数据 to/in 前端。然后它触发了一些东西来渲染更多 data/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");
        }

一定要记得 return header 为了 CORS

如何控制前端渲染，一次只渲染30post

How to control the rendering in the frontend, only rendering 30post at once

inertiajs

vuejs3

laravel-9