<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>
//这是我的app.js
从“vue”导入{createApp，h}；
从'@inertiajs/inertia-vue3'导入{App作为InertiaApp，插件作为InertiaPlugin}；
从 '@inertiajs/progress' 导入 {InertiaProgress}；
从 'vue-router' 导入 {createRouter, createWebHistory}
从“./Pages/Session”导入会话；
从“./Pages/Auth/Login”导入登录名；
从“./Pages/Dashboard”导入仪表板；
从 'vue-next-select' 导入 VueNextSelect
需要('./bootstrap');
window.Vue = require('vue');
常量路由 = [
{
小路： '/'，
名称：'登录'，
组件：登录
},
{
路径：'/仪表板'，
名称：'会话'，
组件：会话，
},
{
路径：'/学生'，
姓名：'学生'，
组件：仪表板，
},
]
常量路由器 = createRouter({
历史记录：createWebHistory(),
路线，
});
导出默认路由器；
const el = document.getElementById('app');
让应用程序=创建应用程序（{
渲染：() =>
h(惯性应用程序, {
初始页面：JSON.parse(el.dataset.page),
解析组件：（名称）=> require(`./Pages/${name}`).default,
}),
})
.mixin({方法: {路由}})
.use(惯性插件)
app.component('vue-select',VueNextSelect)
应用程序使用（路由器）
应用程序挂载(el);
InertiaProgress.init({color: '#4B5563'});;
<这是pre class="brush:html;toolbar:false;"><！--我的学生组件的一部分，这是我获取所有学生的数据列表-->
<div class="search_trainee">
<datalist id="受训者">
;
<!-- 这是我想要用学生数据填充的输入框 -->
<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">
我建议你使用vue-multiselect
npm install vue-multiselect --save你可以在这里找到官方文档
https://vue-multiselect.js.org/#sub-getting-started
为了在所有组件中使用任何组件作为全局组件
app.component('multiselect',require('vue-multiselect').default)