【发布时间】：2021-10-20 08:33:12
【问题描述】：
我正在使用 Laravel 8 和 Vue 3 做一个项目，并且我有一个学生组件。 其中有一个数据列表，用于查找已创建的学生，我希望当我选择一个学生时，它会用我数据库中的数据填充我的字段。
我已经尝试过使用 vueJs 和 v-model，但我只得到了数据列表输入中的字符串。 当我尝试检索在我的字段或数据列表输入中具有 [object Object] 的数据时，我也遇到了一些问题。
这是我的代码：
//This is the data of my trainees which are my students
data() {
return {
trainees: [],
},
//And this is the method that I use to retrieve the student from the database
methods: {
getTrainee() {
axios.get(AXIOS + 'trainee')
.then(response => this.trainees = response.data)
.catch(error => console.log(error));
},
},<!--This is a part of my student component, this is the datalist where I can find my 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>
<!--This is the other part in my Student component, this is the part where I want my input and filed to be fill with the data of the student I pick-->
<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>欢迎任何帮助或建议或提示，如果需要，我可以提供更多代码。 感谢您的宝贵时间。
【问题讨论】：
-
你在哪里调用 getTrainee() 方法？
-
@FrancoMitoire 嗯，它是由 vue js 创建的，然后数据进入“Trainees”然后我使用它
-
您是否尝试在数据选项中定义 selectedUser var，然后 单击一个并查看 vue 开发工具，您的 selectedUser var 中有什么
-
受训者应该是数组吗？如果是这样，您缺少括号
[]。 -
@Tim 哦，是的，没错，一开始就是这样，我只是在尝试，我编辑了我的帖子
标签： javascript laravel vue.js vuejs3