Laravel 8 and Vue.js Failed to Store Data

Question

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

cupstgo · Accepted Answer · 2021-11-25 04:22:02Z

1

Have you already imported the axios library?

   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)
    }

and apparently you don't have a variable called "loading" declared in data()

answered Nov 25, 2021 at 4:22

cupstgo

891 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdul Wadud Somrat · Accepted Answer · 2021-11-25 05:06:05Z

try this code

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

Collectives™ on Stack Overflow

Laravel 8 and Vue.js Failed to Store Data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related