0

所以我在 Laravel 8 和 Vue 3 中有一个项目。在我的 StudentComponent 上,我有一个创建学生的表单,我有一个 vue-select 下拉菜单,当我点击它时,我可以填写我的输入字段:在此处输入图像描述

在同一个组件上,我还有一个 Card/ 表,在其中我有输入字段和单选输入,当我选择我的学生时,我想自动填充它们:在此处输入图像描述

Progression Axis 列上的输入字段的内容在一个表上,而评估列上的单选按钮在另一个表上,让我向您展示我的数据库:在此处输入图像描述

所以你可以看到我已经从我的用户表中检索了数据,但我想从这个用户那里获得进展,然后是标准,然后是主题。我已经尝试了一些 SQL 请求,它可以包含所有内容但没有成功。

让我给你看我的代码:`public function getTrainees() { $sessionName = Session::get('sessionName');

    return DB::table('progressions')
        ->select(DB::raw("users.*, GROUP_CONCAT(progressions.id SEPARATOR ', ') as ids,
        GROUP_CONCAT(progressions.axis SEPARATOR ', ') as axes,
        GROUP_CONCAT(progressions.topic_id SEPARATOR ', ') as topic_ids"))
        ->leftjoin('topics','topics.id','=','progressions.topic_id')
        ->leftjoin('criteria','criteria.id',"=","topics.criteria_id")
        ->leftjoin('cards','cards.id','=','criteria.card_id')
        ->leftjoin('users','users.id','=','cards.user_id')
        ->where('cards.session','LIKE',$sessionName)
        ->groupBy(['users.id','users.lastname','users.firstname'])
        ->get();

}`

这是我在控制器中的请求,但是有了这个请求,我为用户提供了所有进展,但我无法正确使用它。

这是我的 StudentComponent :

//I retrieve my request with this method in my student component   
   getTrainee() {
            axios.get(AXIOS + 'trainee')
                .then(response => this.trainees = response.data)
                .catch(error => console.log(error));
        },
        
        //And this is my data you could need on this component 
         data() {
        return {
            trainees: [],
            selectedStudent: [],
    },
<!--This is the vueSelect element + the form where I create/Retrive the data of my student using vue-select-->
<div v-if="displaySession">
        <h3 class="text-center title_main">Driving-Sheet for {{ sessionName }} session</h3>

        <vue-select  close-on-select searchable :options="trainees" label-by="firstname" id="           {{selectedStudent.id}}" v-model="selectedStudent"></vue-select>

        <div @click.prevent="test">Sqalalalala</div>

        <div class="form_trainee">

            <h3 class=" title_form">Add a trainee</h3>
            <div class="row g-3">
                <div class="col-md-6">
                    <input id="lastname" ref="lastname" class="form-control" v-model="selectedStudent.lastname" name="lastname" placeholder=" "
                           type="text" @blur.prevent="addTrainee();displayAudit()" required>
                    <label class="label_form" for="lastname">Lastname</label>
                </div>
                <div class="col-md-6">
                    <input id="firstname" ref="firstname" v-model="selectedStudent.firstname" class="form-control" name="firstname"
                           placeholder=" " type="text" @blur.prevent="update">
                    <label class="label_form" for="firstname">Firstname</label>
                </div>
                <div class="col-md-6">
                    <input id="email" ref="email" v-model="selectedStudent.email" class="form-control" name="email" placeholder=" "
                           type="email" @blur.prevent="update">
                    <label class="label_form" for="email">Email</label>

                </div>
                <div class="col-md-6">
                    <input id="company" ref="company" v-model="selectedStudent.company" class="form-control" name="company"
                           placeholder=" "
                           type="text" @blur.prevent="update">
                    <label class="label_form" for="company">Company</label>

                </div>
                <div class="col-md-6">
                    <input id="vehicle" ref="vehicle" v-model="selectedStudent.vehicle" class="form-control" name="vehicle"
                           placeholder=" "
                           type="text" @blur.prevent="update">
                    <label class="label_form" for="vehicle">Vehicle</label>

                </div>
                <div class="col-md-6">
                    <input id="location" ref="location" v-model="selectedStudent.location" class="form-control" name="location"
                           placeholder=" "
                           type="text" @blur.prevent="update">
                    <label class="label_form" for="location">Location</label>

                </div>
                <div class="col-md-6">
                    <select id="instructor_id" ref="instructor_id" v-model="instructor" class="form-control"
                            name="instructor_id"
                            @blur.prevent="update">
                        <option value="">--Choose an instructor--</option>
                        <option v-for="user in instructors" :key=user.id v-bind:value="{id:user.id}">{{
                                user.firstname
                            }}
                            {{ user.lastname }}
                        </option>
                    </select>
                </div>
                <div class="col-md-6">
                    <select id="acpCenter" ref="acp_center_id" v-model="acpCenter" class="form-control" name="acpCenter"
                            @blur.prevent="update" >
                        <option value="">--Choose an Acp Center--</option>
                        <option v-for="center in acpCenters" :key="center.id" v-bind:value="{id:center.id}" >
                            {{ center.city }} {{ center.postal_code }}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        
        <!--This is one part of the card-->
        
         <div class="row_content">
                                <div class="radio_td">
                                    <div class="radio_table">
                                    <!--And I want to retrieve data here-->
                                <span class="radio_tr">
                                    <span><input class="red" name="Cleanliness" type="radio" value="red"
                                                 @blur.prevent="createEval($event)"></span>
                                    <span><input class="orange" name="Cleanliness" type="radio" value="orange"
                                                 @blur.prevent="createEval($event)"></span>
                                    <span><input class="green" name="Cleanliness" type="radio" value="green"
                                                 @blur.prevent="createEval($event)"></span>
                                </span>
                                    </div>
                                </div>
                                <div class="td_topics">
                                    <div class="table_topic">
                                <span>
                                    <span><input class="input_topic" disabled type="text" value="Cleanliness"></span>
                                </span>
                                    </div>
                                </div>
                                <div class="td_input">
                                    <div class="table_input">
                                <span class="input_text">
                                <!--And here-->
                                    <span><input name="Cleanliness" type="text"
                                                 @blur.prevent="createProg($event)" v-model="selectedStudent.axes"></span>
                                </span>
                                    </div>
                                </div>
                            </div>

任何提示或部分答案都非常感谢,感谢您的宝贵时间。

如果我没有提供足够的代码,请告诉我,我会尽力为您提供所需的

4

0 回答 0