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 @submit.prevent="addPost">
<input type="text" v-model="post.added_by" placeholder="ADDED_BY">
<input type="text" v-model="post.name_arabi" placeholder="Name(Arabi)">
<input type="text" v-model="post.name" placeholder="Name(Bangla)">
<input type="text" v-model="post.name_english" placeholder="Name(English)">
<input type="text" v-model="post.biboron" placeholder="Biboron">
<input type="text" v-model="post.kathamo" placeholder="kathamo">
<input type="text" v-model="post.status" value="1" readonly>
<button type="submit" >সাবমিট</button>
<button type="reset" 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']);
});
CodePudding user response：
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()
CodePudding user response：
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>