inertia post request problem

Hi, I am confused why I am getting this error. Appreciate for any help. Here is the reproducible code for the error. Frontend vuejs

import { router } from '@inertiajs/vue3'

function test() {
    router.post('/story-output', {
        'title': "story title",
        'story': "This is the story body",
    },
    )
}

Web.php

Route::post('/story-output', [StoryController::class, 'StoryOutput']);

Controller

    public function StoryOutput(Request $request)
    {
        $storyData = $request->all(); // Accessing the passed storyData

        return Inertia::render('StoryOutput', [
            'storyData' => $storyData,
        ]);
       
    }

Error: router.ts:452 Uncaught (in promise) TypeError: this.resolveComponent is not a function at C.setPage (router.ts:452:33) at router.ts:390:21

shariff

2 years ago

Level 50

Is StoryOutput component exist? Or It has any spelling mistakes? Try debugging and check like below.

$storyData = $request->all(); // Accessing the passed storyData
 dd($storyData);
        return Inertia::render('StoryOutput', [
            'storyData' => $storyData,
        ]);

nerginer

2 years ago

Level 6

array:2 [▼ // app/Http/Controllers/StoryController.php:124
  "title" => "story title"
  "story" => "This is the story body"
]

I am getting the data in the controller StoryOutput component is just getting the data and display it.

<template>
        <div class=" bg-stone-300 overflow-y-auto p-4">
            <div class="text-xl font-bold text-center mb-2 mt-20 lg:text-4xl font-IrishGrove">
                {{ storyData.title }}
            </div>
            <div class=" font-IrishGrove lg:text-2xl text-justify p-16">
                {{ storyData.story }}    
            </div>
        </div>
</template>
  
<script setup>
const props = defineProps({
    storyData:Object,
});
</script>

shariff

2 years ago

Level 50

@nerginer Try passing data in snake_case and try

$storyData = $request->all(); // Accessing the passed storyData
        return Inertia::render('StoryOutput', [
            'story_data' => $storyData,
        ]);

<template>
        <div class=" bg-stone-300 overflow-y-auto p-4">
            <div class="text-xl font-bold text-center mb-2 mt-20 lg:text-4xl font-IrishGrove">
                {{ story_data.title }}
            </div>
            <div class=" font-IrishGrove lg:text-2xl text-justify p-16">
                {{ story_data.story }}    
            </div>
        </div>
</template>
  
<script setup>
const props = defineProps({
    story_data:Object,
});
</script>

nerginer

2 years ago

Level 6

@shariff Nothing changed. Same Error

Please or to participate in this conversation.