我无法将输入保存到数据库 Vuejs 和 Laravel
Posted
技术标签:
【中文标题】我无法将输入保存到数据库 Vuejs 和 Laravel【英文标题】：I can't save input to database Vuejs and Laravel 【发布时间】：2020-05-12 19:25:54 【问题描述】：我在表单中添加了两个新输入（ass1 和 ass2），在数据库中创建了列，将其添加到模型中的 $fillable 和方法在 Vue 文件中。
挑战是所有其他输入都保存到数据库中，但我的新输入没有存储到数据库中。
如果我直接输入数据库，数据将显示以供编辑/更新，但不会存储。 我通过代码检查和检查，没有发现任何问题，目前没有错误消息。
如果您需要任何其他详细信息，我很乐意提供。
请帮忙！我的最后期限了。
附：我对Vuejs的了解很少，有点迷糊。
这是我的 form.vue 内容：
<template>
<div>
<form @submit.prevent="proceed" @keydown="assessmentForm.errors.clear($event.target.name)">
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group">
<label for="">trans('exam.assessment_name')</label>
<input class="form-control" type="text" v-model="assessmentForm.name" name="name" :placeholder="trans('exam.assessment_name')">
<show-error :form-name="assessmentForm" prop-name="name"></show-error>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label for="">trans('exam.assessment_description')</label>
<input class="form-control" type="text" v-model="assessmentForm.description" name="description" :placeholder="trans('exam.assessment_description')">
<show-error :form-name="assessmentForm" prop-name="description"></show-error>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h6 class="card-title">trans('exam.assessment_type')</h6>
<template v-for="(detail,index) in assessmentForm.details">
<div class="row">
<div class="col-12 col-sm-3">
<div class="form-group">
<label for="">trans('exam.assessment_detail_name')
<button type="button" class="btn btn-xs btn-danger m-l-20" :key="`$index_delete_detail`" v-confirm="ok: confirmDeleteDetail(index)" v-tooltip="trans('general.delete')"><i class="fas fa-times"></i></button></label>
<input class="form-control" type="text" v-model="detail.name" :name="getDetailName(index)" :placeholder="trans('exam.assessment_detail_name')">
<show-error :form-name="assessmentForm" :prop-name="getDetailName(index)"></show-error>
</div>
</div>
<div class="col-12 col-sm-1">
<div class="form-group">
<label for="">trans('exam.assessment_detail_code')</label>
<input class="form-control" type="text" v-model="detail.code" :name="getDetailCode(index)" :placeholder="trans('exam.assessment_detail_code')">
<show-error :form-name="assessmentForm" :prop-name="getDetailCode(index)"></show-error>
</div>
</div>
<div class="col-12 col-sm-2">
<div class="form-group">
<label for="">trans('exam.assessment_detail_max_mark')</label>
<input class="form-control" type="number" v-model="detail.max_mark" :name="getDetailMaxMarkName(index)" :placeholder="trans('exam.assessment_detail_max_mark')">
<show-error :form-name="assessmentForm" :prop-name="getDetailMaxMarkName(index)"></show-error>
</div>
</div>
<!-- <div class="col-12 col-sm-2">
<div class="form-group">
<label for="">trans('exam.assessment_detail_pass_percentage')</label>
<div class="input-group mb-3">
<input class="form-control" type="number" v-model="detail.pass_percentage" :name="getDetailPassPercentageName(index)" :placeholder="trans('exam.assessment_detail_pass_percentage')">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon1">%</span>
</div>
</div>
<show-error :form-name="assessmentForm" :prop-name="getDetailPassPercentageName(index)"></show-error>
</div>
</div> -->
<div class="col-12 col-sm-2">
<div class="form-group">
<label for="">trans('exam.assessment_detail_ass1')</label>
<input class="form-control" type="number" v-model="detail.ass1" :name="getDetailAssessment1(index)" :placeholder="trans('exam.assessment_detail_ass1')">
<show-error :form-name="assessmentForm" :prop-name="getDetailAssessment1(index)"></show-error>
</div>
</div>
<div class="col-12 col-sm-2">
<div class="form-group">
<label for="">trans('exam.assessment_detail_ass2')</label>
<input class="form-control" type="number" v-model="detail.ass2" :name="getDetailAssessment2(index)" :placeholder="trans('exam.assessment_detail_ass2')">
<show-error :form-name="assessmentForm" :prop-name="getDetailAssessment2(index)"></show-error>
</div>
</div>
<div class="col-12 col-sm-4">
<div class="form-group">
<label for="">trans('exam.assessment_detail_description')</label>
<autosize-textarea v-model="detail.description" rows="2" :name="getDetailDescriptionName(index)" :placeholder="trans('resource.assessment_detail_description')"></autosize-textarea>
<show-error :form-name="assessmentForm" :prop-name="getDetailDescriptionName(index)"></show-error>
</div>
</div>
</div>
</template>
<div class="form-group">
<button type="button" @click="addRow" class="btn btn-info btn-sm waves-effect waves-light">trans('exam.add_new_assessment_detail')</button>
</div>
</div>
</div>
<div class="card-footer text-right">
<router-link to="/configuration/exam/assessment" class="btn btn-danger waves-effect waves-light ">trans('general.cancel')</router-link>
<button type="submit" class="btn btn-info waves-effect waves-light">
<span v-if="id">trans('general.update')</span>
<span v-else>trans('general.save')</span>
</button>
</div>
</form>
</div>
</template>
<script>
export default
components: ,
data()
return
assessmentForm: new Form(
name: '',
description: '',
// details: ['name', 'code', 'max_mark', 'ass1', 'ass2', 'description']
details: []
)
;
,
props: ['id'],
mounted()
if(!helper.hasPermission('access-configuration'))
helper.notAccessibleMsg();
this.$router.push('/dashboard');
if(this.id)
this.get();
else
this.addRow();
,
methods:
hasPermission(permission)
return helper.hasPermission(permission);
,
addRow()
let new_index = this.assessmentForm.details.push(
name: '',
code: '',
max_mark: '',
ass1: '',
ass2: '',
// pass_percentage: '',
description: ''
)
,
confirmDeleteDetail(index)
return dialog => this.deleteDetail(index);
,
deleteDetail(index)
this.assessmentForm.details.splice(index, 1);
,
getDetailName(index)
return index+'_detail_name';
,
getDetailCode(index)
return index+'_detail_code';
,
getDetailMaxMarkName(index)
return index+'_detail_max_mark';
,
// getDetailPassPercentageName(index)
// return index+'_detail_pass_percentage';
// ,
getDetailAssessment1(index)
return index+'_detail_ass1';
,
getDetailAssessment2(index)
return index+'_detail_ass2';
,
getDetailDescriptionName(index)
return index+'_detail_description';
,
proceed()
if(this.id)
this.update();
else
this.store();
,
store()
let loader = this.$loading.show();
this.assessmentForm.post('/api/exam/assessment')
.then(response =>
toastr.success(response.message);
this.assessmentForm.details = [];
this.addRow();
this.$emit('completed');
loader.hide();
)
.catch(error =>
loader.hide();
helper.showErrorMsg(error);
);
,
get()
let loader = this.$loading.show();
axios.get('/api/exam/assessment/'+this.id)
.then(response =>
this.assessmentForm.name = response.name;
this.assessmentForm.description = response.description;
response.details.forEach(detail =>
this.assessmentForm.details.push(
name: detail.name,
code: detail.code,
max_mark: detail.max_mark,
ass1: detail.ass1,
ass2: detail.ass2,
description: detail.description
// pass_percentage: detail.pass_percentage,
);
);
loader.hide();
)
.catch(error =>
loader.hide();
helper.showErrorMsg(error);
this.$router.push('/configuration/exam/assessment');
);
,
update()
let loader = this.$loading.show();
this.assessmentForm.patch('/api/exam/assessment/'+this.id)
.then(response =>
toastr.success(response.message);
loader.hide();
this.$router.push('/configuration/exam/assessment');
)
.catch(error =>
loader.hide();
helper.showErrorMsg(error);
);
</script>
这是模型（AssessmentDetail.php）：
<?php
namespace App\Models\Configuration\Exam;
use Illuminate\Database\Eloquent\Model;
use Spatie\Activitylog\Traits\LogsActivity;
class AssessmentDetail extends Model
use LogsActivity;
protected $fillable = [
'exam_assessment_id',
'name',
'max_mark',
'ass1',
'ass2',
// 'pass_percentage',
'description',
'options'
];
protected $casts = ['options' => 'array'];
protected $primaryKey = 'id';
protected $table = 'exam_assessment_details';
protected static $logName = 'exam_assessment_detail';
protected static $logFillable = true;
protected static $logOnlyDirty = true;
protected static $ignoreChangedAttributes = ['updated_at'];
public function assessment()
return $this->belongsTo('App\Models\Configuration\Exam\Assessment', 'exam_assessment_id');
public function getOption(string $option)
return array_get($this->options, $option);
public function scopeFilterById($q, $id)
if (! $id)
return $q;
return $q->where('id', '=', $id);
public function scopeFilterByExamAssessmentId($q, $exam_assessment_id)
if (! $exam_assessment_id)
return $q;
return $q->where('exam_assessment_id', '=', $exam_assessment_id);
public function scopeFilterByName($q, $name, $s = 0)
if (! $name)
return $q;
return $s ? $q->where('name', '=', $name) : $q->where('name', 'like', '%'.$name.'%');
这是我的控制器（AssessmentController）
<?php
namespace App\Http\Controllers\Configuration\Exam;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Http\Requests\Configuration\Exam\AssessmentRequest;
use App\Repositories\Configuration\Exam\AssessmentRepository;
class AssessmentController extends Controller
protected $request;
protected $repo;
/**
* Instantiate a new controller instance.
*
* @return void
*/
public function __construct(
Request $request,
AssessmentRepository $repo
)
$this->request = $request;
$this->repo = $repo;
$this->middleware('permission:access-configuration');
$this->middleware('academic.session.set');
/**
* Used to get all Exam Assessments
* @get ("/api/exam/assessment")
* @return Response
*/
public function index()
return $this->ok($this->repo->paginate($this->request->all()));
/**
* Used to print all Exam Assessments
* @post ("/api/exam/assessment/print")
* @return Response
*/
public function print()
$exam_assessments = $this->repo->print(request('filter'));
return view('print.configuration.exam.assessment', compact('exam_assessments'))->render();
/**
* Used to generate pdf all Exam Assessments
* @post ("/api/exam/assessment/pdf")
* @return Response
*/
public function pdf()
$exam_assessments = $this->repo->print(request('filter'));
$uuid = Str::uuid();
$pdf = \PDF::loadView('print.configuration.exam.assessment', compact('exam_assessments'))->save('../storage/app/downloads/'.$uuid.'.pdf');
return $uuid;
/**
* Used to store Exam Assessment
* @post ("/api/exam/assessment")
* @param (
* @Parameter("name", type="string", required="true", description="Name of Exam Assessment"),
* @Parameter("description", type="text", required="optional", description="Description of Exam Assessment")
* )
* @return Response
*/
public function store(AssessmentRequest $request)
$exam_assessment = $this->repo->create($this->request->all());
// dd('$exam_assessment');
return $this->success(['message' => trans('exam.assessment_added')]);
/**
* Used to get Exam Assessment detail
* @get ("/api/exam/assessment/id")
* @param (
* @Parameter("id", type="integer", required="true", description="Id of Exam Assessment"),
* )
* @return Response
*/
public function show($id)
return $this->ok($this->repo->findOrFail($id));
/**
* Used to update Exam Assessment
* @patch ("/api/exam/assessment/id")
* @param (
* @Parameter("id", type="integer", required="true", description="Id of Exam Assessment"),
* @Parameter("name", type="string", required="true", description="Name of Exam Assessment"),
* @Parameter("description", type="text", required="optional", description="Description of Exam Assessment")
* )
* @return Response
*/
public function update($id, AssessmentRequest $request)
$exam_assessment = $this->repo->findOrFail($id);
$exam_assessment = $this->repo->update($exam_assessment, $this->request->all());
return $this->success(['message' => trans('exam.assessment_updated')]);
/**
* Used to reorder all Details of assessment
* @frontend ("/api/exam/assessment/id/reorder")
* @return Response
*/
public function reorder($id)
$exam_assessment = $this->repo->findOrFail($id);
$this->repo->reorder($exam_assessment, $this->request->all());
return $this->success(['message' => trans('exam.assessment_updated')]);
/**
* Used to delete Exam Assessment
* @delete ("/api/exam/assessment/id")
* @param (
* @Parameter("id", type="integer", required="true", description="Id of Exam Assessment"),
* )
* @return Response
*/
public function destroy($id)
$exam_assessment = $this->repo->deletable($id);
$this->repo->delete($exam_assessment);
return $this->success(['message' => trans('exam.assessment_deleted')]);
这些是来自 Api.php 的评估路径
Route::get('/exam/assessment/id', 'Configuration\Exam\AssessmentController@show');
Route::post('/exam/assessment', 'Configuration\Exam\AssessmentController@store');
Route::patch('/exam/assessment/id', 'Configuration\Exam\AssessmentController@update');
Route::delete('/exam/assessment/id', 'Configuration\Exam\AssessmentController@destroy');
【问题讨论】：
但是您成功地将输入传递给服务器？ 如何检查？ 在你的 store 方法中，返回 $request->all() 即使在清除缓存后我也看到了相同的视图 您的字段是否未命名为1_detail_ass1、2_detail_ass1 等...？这些未在您的 $fillable 属性中定义。
【参考方案1】：
谢谢大家的cmets。
我终于找到了解决办法。
显然，在我的控制器 (AssessmentController) 中，我的构造方法是从 AssessmentRepository (App\Repository) 获取输入。
public function __construct(
Request $request,
AssessmentRepository $repo
)
$this->request = $request;
$this->repo = $repo;
$this->middleware('permission:access-configuration');
$this->middleware('academic.session.set');
然后在我的商店中调用$repo，更新、显示、重新排序等方法。
我以前从未见过或使用过 App\Repositories。
你每天都在学习！
【讨论】：
以上是关于我无法将输入保存到数据库 Vuejs 和 Laravel的主要内容，如果未能解决你的问题，请参考以下文章