vue.jsからlaravel 9にデータを渡す-PHP中国語ネットワークQ&A

問題: axios

を使用して vue.js から laravel にデータを渡すときに内部サーバーエラーが発生します。

新しいlaravelプロジェクトを作成し、vueを使用してbreeceをインストールしました（phpArtisan Breeze：vueのインストール）。次に、メニューコントローラーを作成し、次のように menu.vue をレンダリングしました。

パブリック関数 Index() { $menuItems = メニュー::all(); return Inertia::render('メニュー', [ 'menuItems' => $menuItems ]); }

Route::get('menu',[MenuController::class,'index']); CartController

を作成しました。

input('id'); $menu = メニュー::find($menu_id); $cart=新しいカート(); $cart->table=$request->table; $cart->menus_id=$menu_id; $response=$cart->save(); } }

ここでは、menu.vue から返されたデータを保存する必要があります。 menu.vue

      <スクリプトのセットアップ>
       import { Head } から '@inertiajs/vue3'; 
       <テンプレート>
         <ナビゲーションバー />
        
          
         <画像 v-bind:src=""'menuItemImage/'" item.image" クラス="w-12 h-12"> {{ 項目名 }} 
         <ボタン @click=""addToCart(item)"" class=""mt-4" bg-blue-500 text-white py-2 px-4rounded-lg hover:bg-blue-600">
          追加  
 
 
  <スクリプト> 「@/Layouts/NavbarLayout.vue」からナビゲーションバーをインポートします; "axios" から axios をインポートします。 デフォルトのエクスポート { 名前: 「メニュー」、 データ（） { 戻る {}; }、 コンポーネント: { ナビゲーションバー、 }、 小道具: ["menuItems"]、 メソッド: { addToCart(item) { console.log(アイテム.id); アクシオス .post("/カート", { menu_id: item.id、 }) .then(関数 (応答) { コンソール.ログ(応答.データ); }) .catch(関数 (エラー) { コンソール.ログ(エラー); }); }、 }、 };

問題は、これがいつ呼び出されるかです

axios .post("/カート", { menu_id: item.id、 })

このエラーが発生しました: エラー

これは私の app.js です

axios インポート './ブートストラップ'; インポート '../css/app.css'; import { createApp, h } から 'vue'; import { createInertiaApp } から '@inertiajs/vue3'; import { replacePageComponent } から 'laravel-vite-plugin/inertia-helpers'; import { ZiggyVue } から '../../vendor/tightenco/ziggy/dist/vue.m'; const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'; createInertiaApp({ title: (title) => `${title} - ${appName}`, solve: (name) =>solvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), setup({ エル、アプリ、小道具、プラグイン }) { return createApp({ render: () => h(App, props) }) .use(プラグイン) .use(ZiggyVue、ジギー) .mount(el); }、 進捗： { 色: '#4B5563'、 }、 });

これは私の app.blade.php

 
            <メタ名="ビューポート"コンテンツ="幅=デバイス幅、初期スケール=1"" <タイトルの慣性>{{ config('app.name', 'Laravel') }}    @ルート @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"]) @慣性ヘッド 
  @慣性

これはストレージ/ログファイルにあります[2023-02-08 16:39:49] local.ERROR: SQLSTATE[23000]: 整合性制約違反: 1048 列 'menus_id' を null にすることはできません (SQL: カートに挿入 (menus_id、table、updated_at、 ;created_at ;) value(?, ?, 2023-02-08 16:39:49, 2023-02-08 16:39:49)) {"例外":"[オブジェクト] (Illuminate\\Database\ \QueryException(Code : 23000): SQLSTATE[ 23000]: 整合性制約違反: 1048 列 'menus_id' を null にすることはできません (SQL: カート に INSERT (menus_id, ;table, updated_at, created_at) value(?, ?, 2023-02-08 16:39:49, 2023-02-08 16 :39:49)) D:\Trinity\7th SEM\Project Work\smart_QR_based_restaurant\\Supplier\\laravel\\Framework\\src\\Illuminate\\Database\\ Connection.php:760) [スタックトレース] < /コード>