通过Vue.js从数据库中获取数据，将其填充到输入框中并提供选择选项
<p>我有一个使用Laravel 8和Vue 3的应用程序。
我有一个名为Student Component的组件，其中有一个datalist，列出了所有我的学生。
当我点击这个学生时，我希望我的输入框填充有关该特定学生的所有信息。</p>
<p>我已经尝试使用Vue select，但它只适用于Vue 2，不适用于Vue 3。
我尝试了Vue-next-select，它应该适用于Vue 3，但当我安装它时，在我的package.json的依赖项中出现，但当我在我的App.js中导入它时，它被下划线标记，并显示“模块未安装”，我不知道为什么。</p>
<p>所以我想找到Vue-next-select的解决方案，使其工作，或者任何其他使其工作的解决方案。</p>
<p>这是我的代码：</p>
<p>
<pre class="brush:js;toolbar:false;">// 这是我的app.js
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import {InertiaProgress} from '@inertiajs/progress';
import {createRouter, createWebHistory} from 'vue-router'
import Session from "./Pages/Session";
import Login from "./Pages/Auth/Login";
import Dashboard from "./Pages/Dashboard";
import VueNextSelect from 'vue-next-select'
require('./bootstrap');
window.Vue = require('vue');
const routes = [
{
path: '/',
name: 'login',
component: Login
},
{
path: '/dashboard',
name: 'session',
component: Session,
},
{
path: '/student',
name: 'student',
component: Dashboard,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
const el = document.getElementById('app');
let app = createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({methods: {route}})
.use(InertiaPlugin)
app.component('vue-select',VueNextSelect)
app.use(router)
app.mount(el);
InertiaProgress.init({color: '#4B5563'});</pre>
<pre class="brush:html;toolbar:false;"><!-- 这是我的student组件的一部分，这是我获取所有学生的datalist -->
<div class="search_trainee">
<input id="search" class="search_trainee_input" list="trainees" placeholder=" "
type="text">
<label class="label_search" for="search">搜索一个学员</label>
<datalist id="trainees">
<option v-for="user in trainees" :key="user.id" :value="user">
{{ user.firstname }} {{ user.lastname }}
</option>
</datalist>
</div>
<!-- 这是我想要用学生数据填充的输入框 -->
<div class="form_trainee">
<h3 class=" title_form">添加一个学员</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">姓氏</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">名字</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">邮箱</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">公司</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">车辆</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">位置</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="">--选择一个教练--</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="">--选择一个Acp中心--</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></pre>
</p>
<p>如果需要，我可以提供更多的代码。
任何解决方案、建议或提示都会帮助我。
感谢您的时间。</p>
1
1054
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
我建议你使用vue-multiselect
npm install vue-multiselect --save你可以在这里找到官方文档
https://vue-multiselect.js.org/#sub-getting-started
为了在所有组件中使用任何组件作为全局组件
app.component('multiselect',require('vue-multiselect').default)