Laravel 8 and Vue.js Failed to Store Data


I am tried to store data in database with Laravel 8 and Vue.js. The Api is Working fine. but i am failed to store the data with Vue Modals. I when i filled up and tried to submit it’s noting happen. i was tried different code to do this. but all are same problems occur. here i shared my latest code which i was tried to store the data

I checked the Console Log

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)

Please Help Me if you have time

my Code is there

<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 AppModels;

 use IlluminateDatabaseEloquentFactoriesHasFactory;
 use IlluminateDatabaseEloquentModel;

 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']);
 });

Source: Vue – Stack Overflow

November 25, 2021
Category : News
Tags: laravel | php | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.