Transmettre les données de vue.js à Laravel 9

Question

Problème : erreur de serveur interne lors de la transmission de données de vue.js à laravel à l'aide d'axios

J'ai créé un nouveau projet Laravel et installé Breece en utilisant vue (php artisan Breeze : install vue). Ensuite, j'ai créé un contrôleur de menu et rendu menu.vue comme ceci :

index de fonction publique()
    {
        $menuItems = Menu :: tous ();
        return Inertia::render('Menu', [
            'menuItems' => $menuItems
        ]);
        
    }</pré>
<p><code>Route::get('menu',[MenuController::class,'index']);
Maintenant, j'ai créé CartController</p>
<pre class="brush:php;toolbar:false;"><?php

espace de noms AppHttpControllers ;

utilisez AppModelsCart ;
utilisez AppModelsMenu ;
utilisez IlluminateHttpRequest ;


la classe CartController étend le contrôleur
{
    magasin de fonctions publiques (Requête $request)
    {
        dd("CONTRÔLEUR");
        $menu_id = $request->input('id');
        $menu = Menu :: trouver ($ menu_id);
        $cart=nouveau panier();
        $cart->table=$request->table;
        $cart->menus_id=$menu_id;
        $response=$cart->save();
    }

   
}</pré>
<p>Ici, je dois stocker les données renvoyées par menu.vue
menu.vue</p>
<pre class="brush:php;toolbar:false;"><configuration du script>
importer { Head } depuis '@inertiajs/vue3' ;
</script>
<modèle>
        <Titre du titre="Menu" />
    <barre de navigation />
    <div
        class = "grille grille-cols-1 md: grille-cols-3 lg: grille-cols-4 xl: grille-cols-5 écart-4 mx-20"
    >
        <div v-for="élément dans menuItems" :key="item.id">
            <div class="p-6 bg-blanc arrondi-lg shadow-lg">
                <img
                    v-bind:src="'menuItemImage/' + item.image"
                    classe = "w-12 h-12"
                />
                <h3 class="text-lg font-medium-tight">
                    {{ nom de l'article }}
                </h3>
                <bouton
                    @click="addToCart(item)"
                    class = "mt-4 bg-blue-500 texte-blanc py-2 px-4 arrondi-lg survol : bg-blue-600"
                >
                    Ajouter
                </bouton>
            </div>
        </div>
    </div>
</modèle>
<script>
importer la barre de navigation depuis "@/Layouts/NavbarLayout.vue" ;
importer des axios depuis "axios" ;


exporter par défaut {
    nom : "Menu",
    données() {
        retour {};
    },
    Composants: {
        barre de navigation,
    },
    accessoires : ["menuItems"],
    méthodes : {
        addToCart (article) {
            console.log(article.id);
         
                axios
                    .post("/cart", {
                        menu_id : élément.id,
                    })
                    .then(fonction (réponse) {
                        console.log(response.data);
                    })
                    .catch(fonction (erreur) {
                        console.log(erreur);
                    });
        
    },
},
} ;
</script>

问题是当这被调用时

axios
       .post("/cart", {
        menu_id : élément.id,
         })</pré>
<p>它给了我这个错误：
错误</p>
<p>这是我的 app.js</p>
<pre class="brush:php;toolbar:false;">axios
       importer './bootstrap';
importer '../css/app.css';

importer { createApp, h } depuis 'vue' ;
importer { createInertiaApp } depuis '@inertiajs/vue3' ;
importer { solvePageComponent } depuis 'laravel-vite-plugin/inertia-helpers' ;
importer { ZiggyVue } depuis '../../vendor/tightenco/ziggy/dist/vue.m' ;

const appName = window.document.getElementsByTagName('title')[0]?.innerText || « Laravel » ;

créerInertiaApp({
    titre : (titre) => `${title} - ${appName}`,
    résoudre : (nom) => solvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ élément, application, accessoires, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plug-in)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progrès: {
        couleur : '#4B5563',
    },
});</pré>
<p>这是我的app.blade.php</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <tête>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <inertie du titre>{{ config('app.name', 'Laravel') }}</titre>

        <!-- Polices -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    ≪/tête>
    <body class="font-sans antialiased">
        @inertie
    </corps>
</html>

Ceci est dans le fichier de stockage/journal[2023-02-08 16:39:49] local.ERROR : SQLSTATE[23000] : violation de contrainte d'intégrité : 1048 La colonne 'menus_id' ne peut pas être nulle (SQL : Insérer dans carts (menus_id, table, updated_at, ;created_at ;) value(?, ?, 08/02/2023 16:39:49, 08/02/2023 16:39:49)) {"Exception": [Objet] (Illuminate\Database\QueryException (code : 23000 ) : SQLSTATE[ 23000] : violation de contrainte d'intégrité : 1048 La colonne 'menus_id' ne peut pas être nulle (SQL : INSÉRER dans carts (menus_id, < /code>table< ;code>, updated_at, created_at) valeur (?, ?, 08/02/2023 16:39:49, 08/02/2023 16:39 :49)) dans D:\Trinity\7th SEM\Project Work\smart_QR_based_restaurant\Suppliers\laravel\Framework\src\Illuminate\Database\Connection.php:760) [stacktrace]

Answer 1

C'est peut-être votre problème,

Vous transmettez cet objet en tant que données de publication

{menu_id: item.id}

Ensuite vous appelez une entrée dans le contrôleur qui n'existe pas$request->input('id')

$menu_id = $request->input('id');
$menu = Menu::find($menu_id);

devrait être $request->input('menu_id');

Cependant, vérifiez à nouveau vos journaux pour voir l'erreur réelle générée

Vous devez également ajouter une validation dans votre contrôleur pour vous assurer que l'ID que vous transmettez existe dans le tableau

public function store(Request $request) {
    
    $request->validate([
        'menu_id' => 'required|exists:menus,id'
    ]);
    
    
    $menu_id = $request->input('menu_id');
    $menu = Menu::find($menu_id);
    $cart=new Cart();
    $cart->table=$request->table;
    $cart->menus_id=$menu_id;
    $response=$cart->save();
}