我試圖用 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 @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>控制器
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');
}
模型
<?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']);
});
uj5u.com熱心網友回復：
您是否已經匯入了 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 ”的變數
uj5u.com熱心網友回復：
試試這個代碼
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366326.html