Laravel 8 和 Vue.js 存儲數據失敗

Question

我嘗試使用 Laravel 8 和 Vue.js 將數據存儲在數據庫中。 Api 工作正常。 但我無法使用 Vue Modals 存儲數據。 當我填滿並嘗試提交時，我注意到它發生了。 我嘗試了不同的代碼來做到這一點。 但都是同樣的問題。 在這里我分享了我試圖存儲數據的最新代碼

我檢查了控制台日志

app.js:145403 TypeError: Cannot read properties of undefined (reading 'post')
at VueComponent.addPost (137.47ede24512f3845f56da.js:221)
at submit (137.47ede24512f3845f56da.js:443)
at invokeWithErrorHandling (app.js:145369)
at HTMLFormElement.invoker (app.js:145694)
at HTMLFormElement.original._wrapper (app.js:151088)

如果你有時間請幫幫我

我的代碼在那里

 <template> <div> <form class="" @submit.prevent="addPost"> <input class="form-control" type="text" v-model="post.added_by" placeholder="ADDED_BY"> <input class="form-control" type="text" v-model="post.name_arabi" placeholder="Name(Arabi)"> <input class="form-control" type="text" v-model="post.name" placeholder="Name(Bangla)"> <input class="form-control" type="text" v-model="post.name_english" placeholder="Name(English)"> <input class="form-control" type="text" v-model="post.biboron" placeholder="Biboron"> <input class="form-control" type="text" v-model="post.kathamo" placeholder="kathamo"> <input class="form-control" type="text" v-model="post.status" value="1" readonly> <button type="submit" class="btn btn-primary data-submit me-1">সাবমিট</button> <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">বাতিল</button> </form> </div> </template> <script> export default { data() { return { post: {} } }, methods: { addPost() { this.axios.post('http://localhost:8000/api/post/add', this.post).then(response => ( this.$router.push({name: 'home'}) )).catch(error => console.log(error)).finally(() => this.loading = false) } } } </script>

Controller

 public function add(Request $request)
{
 
    $post = new Songothon([
        'added_by' => $request->input('added_by'),
        'name_arabi' => $request->input('name_arabi'),
        'name' => $request->input('name'),
        'name_english' => $request->input('name_english'),
        'biboron' => $request->input('biboron'),
        'kathamo' => $request->input('kathamo'),
        'status' => $request->input('status')

    ]);
    $post->save();

    return response()->json('Songothon successfully added');
    
}

Model

<?php

 namespace App\Models;

 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;

 class Songothon extends Model
  {
     use HasFactory;

    protected $fillable = [
    'name_arabi','name','name_english', 'added_by', 'biboron', 'kathamo', 'status'
    
   ];
 }
Route APi

Route::get('orgs', [SongothonController::class, 'index']);
Route::group(['prefix' => 'org'], function () {
Route::post('add', [SongothonController::class, 'add']);
Route::get('edit/{id}', [SongothonController::class, 'edit']);
Route::post('update/{id}', [SongothonController::class, 'update']);
Route::delete('delete/{id}', [SongothonController::class, 'delete']);
 });

Answer 1

您是否已經導入了 axios 庫？

   import axios from 'axios';
    
    addPost() {
    
        axios
            .post('http://localhost:8000/api/post/add', this.post)
            .then(response => (
                this.$router.push({
                    name: 'home'
                })
    
            ))
            .catch(error => console.log(error))
            .finally(() => this.loading = false)
    } 

顯然你沒有在 data() 中聲明一個名為“ loading ”的變量

Answer 2

試試這個代碼

<template>
<div>
    <form class="" @submit.prevent="addPost">
                          
        <input class="form-control" type="text" v-model="post.added_by" placeholder="ADDED_BY">
        <input class="form-control" type="text" v-model="post.name_arabi" placeholder="Name(Arabi)">
        <input class="form-control" type="text" v-model="post.name" placeholder="Name(Bangla)">
        <input class="form-control" type="text" v-model="post.name_english" placeholder="Name(English)">
        <input class="form-control" type="text" v-model="post.biboron" placeholder="Biboron">
        <input class="form-control" type="text" v-model="post.kathamo" placeholder="kathamo">
        <input class="form-control" type="text" v-model="post.status" value="1" readonly>

                              
        <button type="submit" class="btn btn-primary data-submit me-1">সাবমিট</button>
        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">বাতিল</button>
      
                           
    </form>
</div>
</template>

Vue.js

<script>
    import axios from "../../axios";
    export default {
        data() {
            return {
                 post:{},
                 loading:false
            }
        },
        methods: {
            addPost() {
  axios.post('http://localhost:8000/api/post/add', this.post).then(response => {
           console.log( response.data);
      })
      .catch(error =>{console.log(error)})
      .finally(() => this.loading = false)
}
        }
    }
</script>