所以我在 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>
任何提示或部分答案都非常感谢,感谢您的宝贵时间。
如果我没有提供足够的代码,请告诉我,我会尽力为您提供所需的