I'm currently working on a project utilizing Laravel 8 and Vue 3, and I have a Student Component. Within this component, there is a datalist that allows me to search for existing students. When I select a student from the list, I want the corresponding data from my database to populate the fields.
I've attempted using vueJs and v-model, but I'm only able to retrieve the string in the input of the datalist. Additionally, when trying to retrieve the data, I encounter issues where I receive [object Object] in either the field or datalist input.
Here's a snippet of my code:
//This section contains the data of my trainees who are the students
data() {
return {
trainees: [],
},
//This method is used to fetch the student details from the database
methods: {
getTrainee() {
axios.get(AXIOS + 'trainee')
.then(response => this.trainees = response.data)
.catch(error => console.log(error));
},
},<!--The following excerpt is part of my student component, featuring the datalist for finding students-->
<div class="search_trainee">
<input id="search" class="search_trainee_input" list="trainees" placeholder=" "
type="text">
<label class="label_search" for="search">Search a trainee</label>
<datalist id="trainees">
<option v-for="user in trainees" :key="user.id">
{{ user.firstname }} {{ user.lastname }}
</option>
</datalist>
</div>
<!--In another part of my Student component, I aim to auto-fill my fields with selected student data-->
<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" name="lastname" placeholder=" "
type="text" @blur.prevent="addTrainee();displayAudit()">
<label class="label_form" for="lastname">Lastname</label>
</div>
<div class="col-md-6">
<input id="firstname" ref="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" 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" 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" 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" 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>If you have any advice, tips, or further assistance, please feel free to share. I can provide additional code if needed. Thank you for your time.