Я не могу сохранить ввод в базу данных Vuejs и Laravel

Question

Я добавил два новых ввода ( ass1 и ass2 ) в форму, создал столбцы в базе данных, добавил его в $fillable в модели и метод в Vue файл. Проблема заключается в том, что все остальные входные данные сохраняются в базе данных, но мои новые входные данные не сохраняются в базе данных.

Если я введу данные непосредственно в базу данных, данные будут отображаться для редактирования / обновления, но не будут сохраняться. Я проверил и проверил код и не могу найти никаких проблем, пока нет сообщений об ошибках.

Если вам нужны какие-либо другие данные, я буду рад предоставить их.

Пожалуйста, помогите ! Я на крайнем сроке.

PS Я очень мало знаю о Vuejs, это немного сбивает с толку.

Это моя форма. 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');

Answer 1

Спасибо всем за ваши комментарии.

Я наконец нашел решение.

По-видимому, в моем контроллере (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.

Вы учитесь каждый день!