Hantar data dari vue.js ke laravel 9
<p>Isu: Ralat pelayan dalaman apabila menghantar data daripada vue.js ke laravel menggunakan axios</p>
<p>Saya mencipta projek laravel baharu dan memasang breece menggunakan vue (php artisan Breeze: pasang vue). Kemudian saya mencipta pengawal menu dan memberikan menu.vue seperti ini: </p>
<pre class="brush:php;toolbar:false;">indeks fungsi awam()
{
$menuItems = Menu::semua();
return Inersia::render('Menu', [
'menuItems' =>
]);
}</pre>
<p><kod>Route::get('menu',[MenuController::class,'index']);
Sekarang saya mencipta CartController</p>
<pre class="brush:php;toolbar:false;"><?php
ruang nama AppHttpControllers;
gunakan AppModelsCart;
gunakan AppModelsMenu;
gunakan IlluminateHttpRequest;
kelas CartController memanjangkan Pengawal
{
kedai fungsi awam(Minta $request)
{
dd("PENGAWAL");
$menu_id = $request->input('id');
$menu = Menu::find($menu_id);
$cart=New Cart();
$cart->table=$request->table;
$cart->menus_id=$menu_id;
$respons=$cart->save();
}
}</pre>
<p>Di sini saya perlu menyimpan data yang dikembalikan daripada menu.vue
menu.vue</p>
<pre class="brush:php;toolbar:false;"><setup script>
import { Head } daripada '@inertiajs/vue3';
</skrip>
<template>
<Tajuk kepala="Menu"
<navbar />
<div
class="grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mx-20"
>
<div v-for="item dalam menuItems" :key="item.id">
<div class="p-6 bg-putih bulat-lg bayang-lg">
<img
v-bind:src="'menuItemImage/' + item.image"
kelas="w-12 h-12"
/>
<h3 class="teks-lg fon-sederhana terkemuka-ketat">
{{ nama barang }}
</h3>
<butang
@click="addToCart(item)"
class="mt-4 bg-biru-500 teks-putih py-2 px-4 bulat-lg tuding:bg-biru-600"
>
Tambah
</butang>
</div>
</div>
</div>
</template>
<skrip>
import navbar daripada "@/Layouts/NavbarLayout.vue";
import axios daripada "axios";
eksport lalai {
nama: "Menu",
data() {
kembali {};
},
komponen: {
navbar,
},
prop: ["menuItems"],
kaedah: {
addToCart(item) {
console.log(item.id);
aksios
.post("/cart", {
menu_id: item.id,
})
.then(fungsi (tindak balas) {
console.log(response.data);
})
.catch(fungsi (ralat) {
console.log(error);
});
},
},
};
</script></pre>
<p>问题是当这被调用时</p>
<pre class="brush:php;toolbar:false;">axios
.post("/cart", {
menu_id: item.id,
})</pre>
<p>它给了我这个错误：
错误</p>
<p>这是我的 app.js</p>
<pre class="brush:php;toolbar:false;">axios
import './bootstrap';
import '../css/app.css';
import { createApp, h } daripada 'vue';
import { createInertiaApp } daripada '@inertiajs/vue3';
import { resolvePageComponent } daripada 'laravel-vite-plugin/inersia-helpers';
import { ZiggyVue } daripada '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
tajuk: (tajuk) => `${title} - ${appName}`,
menyelesaikan: (nama) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
persediaan({ el, Apl, prop, pemalam }) {
kembalikan createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
kemajuan: {
warna: '#4B5563',
},
});</pre>
<p>这是我的app.blade.php</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<kepala>
<meta charset="utf-8">
<meta name="viewport" kandungan="lebar=lebar peranti, skala awal=1">
<inersia tajuk>{{ config('app.name', 'Laravel') }}</title>
<!-- Fon -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Skrip -->
@laluan
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inersiaHead
</head>
<kelas badan="font-sans antialiased">
@inersia
</badan>
</html></pre>
<p>Ini ada dalam fail storan/log<kod>[2023-02-08 16:39:49] setempat. RALAT: SQLSTATE[23000]: Pelanggaran kekangan integriti: 1048 Lajur 'id_menu' tidak boleh batal (SQL: Masukkan ke dalam </code>carts<code> (</code>menus_id<code>, </code>table<code>, </code>updated_at<code>, </code> ;) nilai(?, ?, 2023-02-08 16:39:49, 2023-02-08 16:39:49)) {"Pengecualian":"[Objek] (Illuminate\Database\QueryException (kod: 23000 ): SQLSTATE[ 23000]: Pelanggaran kekangan integriti: 1048 Lajur 'id_menu' tidak boleh batal (SQL: INSERT ke dalam </kod>carts<kod> (</code>menus_id<kod>>table>>table>>table>> ;kod>, </kod >dikemas kini_pada<kod>, </kod>dicipta_pada<kod>) nilai (?, ?, 2023-02-08 16:39:49, 2023-02-08 16:39 :49)) dalam D:\Trinity\7th SEM\Project Work\smart_QR_based_restaurant\Suppliers\laravel\Framework\src\Illuminate\Database\Connection.php:760) [stacktrace] </code> ;
