解決したいこと
データ分析画面で分析するデータの期間をフォームから選択して分析ボタン押すと
指定した期間内のデータをJSON形式で取得して変数にセットしたのちにコンソールに出力したい。
画面レイアウト
![スクリーンショット 2024-06-07 181430.png](https://camo.qiitausercontent.com/3fb6b84fb07f5f9beb2462dc5fd8959524104d98/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333731323338372f38396665643262392d363463362d343162362d333466642d6365353430373662323133612e706e67)
開発環境
フロントエンド
vue.js 3.2
Inertia.js 1.0
バックエンド
Laravel 9.52.16
データをJSON形式でVue側へ渡せたのですが、変数へセットする方法が分かりません。
Analysis.vueのonMountedの中でconsole.log
を試したところ実行されなかった。
発生している問題・エラー
All Inertia requests must receive a valid Inertia response, however a plain JSON response was received.
【ブラウザに表示されているメッセージ】
![スクリーンショット 2024-06-09 063844.png](https://camo.qiitausercontent.com/5a1516d95eacad05c8c1aecbe2ef820891cd23ff/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333731323338372f30363662643930632d643534642d306136362d623666362d6562336634323838373762392e706e67)
【コンソール上】ログには出力してくれなかった
![スクリーンショット 2024-06-09 063914.png](https://camo.qiitausercontent.com/42283ce8b420ff2f319070fa05ff3c5725822b42/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333731323338372f30643739323936322d316435342d303765312d356161342d3938613736383736333535312e706e67)
該当するソースコード
Analysis.vue
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
import { onMounted } from 'vue';
import { getToday } from '@/common';
import { useForm } from '@inertiajs/vue3'
const props = defineProps({
data: Object
})
onMounted(() => {
form.startDate = getToday()
form.endDate = getToday();
console.log(props);
})
const form = useForm({
startDate: null,
endDate: null,
type: 'perDay'
})
</script>
<template>
<Head title="データ分析" />
<AuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">データ分析</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<form @submit.prevent="form.post(route('data.analysis'))">
From: <input type="date" name="startDate" v-model="form.startDate">
To: <input type="date" name="endDate" v-model="form.endDate"><br>
<button class="mt-4 flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">分析する</button>
</form>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
</template>
web.php
<?php
use Illuminate\Support\Facades\Route;
Route::post('data/analysis', [ App\Http\Controllers\Data\AnalysisController::class, 'index'])
->name('data.analysis');
AnalysisController.php
<?php
<?php
namespace App\Http\Controllers\Data;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use App\Models\Order;
use Illuminate\Support\Facades\DB;
class AnalysisController extends Controller
{
public function index(Request $request)
{
//orderモデルから期間内のデータを取得する
$subQuery = Order::betweenDate($request->startDate, $request->endDate);
if ($request->type === 'perDay')
{
$subQuery->where('status',true)
->groupBy('id')
->selectRaw('SUM(subtotal) AS totalPerPurchase, DATE_FORMAT(created_at, "%Y%m%d") AS date')
->groupBy('date');
$data = DB::table($subQuery)
->groupBy('date')
->selectRaw('date, sum(totalPerPurchase) as total')
->get();
}
return response()->json([
'data' => $data,
'type' => $request->type
], Response::HTTP_OK);
}
}
自分で試したこと
・ChatGptで調べてみた。
Inertiaリクエストに対してはInertiaレスポンスとしてJSONを返す必要があるみたいだったので
Inertia::renderを使ったコードに書き換えましたが別のエラーが発生しました。
AnalysisContoroller.php
<?php
namespace App\Http\Controllers\Data;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use App\Models\Order;
use Illuminate\Support\Facades\DB;
use Inertia\Inertia;
class AnalysisController extends Controller
{
public function index(Request $request)
{
//orderモデルから期間内のデータを取得する
$subQuery = Order::betweenDate($request->startDate, $request->endDate);
if ($request->type === 'perDay')
{
$subQuery->where('status',true)
->groupBy('id')
->selectRaw('SUM(subtotal) AS totalPerPurchase, DATE_FORMAT(created_at, "%Y%m%d") AS date')
->groupBy('date');
$data = DB::table($subQuery)
->groupBy('date')
->selectRaw('date, sum(totalPerPurchase) as total')
->get();
}
if ($request->header('X-Inertia')) {
//dd関数で$requestが取得できていることは確認できた。
// dd($request);
return Inertia::render('Analysis', [
'data' => $data,
'type' => $request->type
], Response::HTTP_OK);
}
}
}
新たに発生しているエラー
@inertiajs_vue3.js?v=c8f87184:2901 Uncaught (in promise) TypeError: this.resolveComponent is not a function
![スクリーンショット 2024-06-09 064452.png](https://camo.qiitausercontent.com/96e077f2614d0b2674dba04fcef1aa00291a3fc8/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333731323338372f64333630333863332d326538352d323663612d656436642d6438306166353866646562312e706e67)